Knockout.js consumes too much memory

Question

I continue to open Process Explorer and check the "Private Bytes" column of the firefox.exe process. After clicking the "Add" button in this example:

<script id="tmplComment" type="text/x-jquery-tmpl">
    <div>
        <span>Comment:&nbsp;</span>
        <span data-bind="text: $data"></span>
    </div>
</script>    

<input type="button" id="btnAdd" value="Add"/>
<div id="Content" data-bind="template: {name: 'tmplComment', foreach: Comments}">        
</div>

With this code:

var vm = {Comments: ko.observableArray(["a", "b"])};
ko.applyBindings(vm);
$("#btnAdd").click(function()
{
    for(var i = 0; i<500; i++)
        vm.Comments.push(i.toString());
});

(also see this jsfiddle )

It seems to me that the private bytes received by Firefox have increased by about 50-100 MB.

The runtime is also quite long when I compare it with implementations that do not have dependency tracking, given this example:

<script id="tmplComment" type="text/x-jquery-tmpl">
    <div>
        <span>Comment:&nbsp;</span>
        <span data-bind="text: $data"></span>
    </div>
</script>    

<input type="button" id="btnAdd" value="Add"/>
<div id="Content" data-bind="template: {name: 'tmplComment', foreach: Comments}">        
</div>

With this code:

var vm = {Comments: ko.observableArray(["a", "b"])};
ko.applyBindings(vm);
$("#btnAdd").click(function()
{
    for(var i = 0; i<500; i++)
        vm.Comments.push(i.toString());
});

(also see this jsfiddle )

My question is: unsatisfactory performance when using Knockout.js or am I doing something wrong?

Answer 1

, foreach . , , , , / DOM. 500 .

, :

$("#btnAdd").click(function()
{
    var items = vm.Comments();
    for(var i = 0; i<500; i++) {
         items.push(i.toString());
    }

    vm.Comments.valueHasMutated();
});

( push valueHasMutated).

. , foreach, , .

Answer 2

RP . : http://jsfiddle.net/uLkDP/32/

:

$("#btnAdd").click(function()
{
    var a = ["a", "b"];
    for(var i = 0; i<500; i++)
        a.push(i);

    vm.Comments(a);
});

: http://jsfiddle.net/uLkDP/30/

, , Google Chrome. RP 4 , 8. , .