Can I speed up knockout when populating a large observable array?

Question

I have a web app that does a SOAP request for some data and populates a knockout viewmodel with the results. I'm currently getting around 1000 line items back that have to be pushed onto my knockout viewmodel. Profiling the page in chrome shows that a large portion of the load time/CPU is spent in knockout.js. I'm wandering if there's a way to maybe delay any knockout updates/processing until all of the items are pushed into the observable array.

Edit: To be more clear, I guess I'm looking for something like delaying or throttling. But it looks like, from this answer that I might just be better off building a normal array and then populating the entire observable array, instead of pushing each item directly onto the observable array. This might remove my need to delay or throttle bindings. Any recommendations?

Answer 1

If you just need to replace the contents of an observableArray, you don't need to loop through the array.

The most efficient operation is to simply set it to a new value:

this.obsArray(newData);

Answer 2

This is probably the best approach:

function MyVM(){
    this.fooObsArray = ko.observableArray([]);
}

function Foo(){

var self = this;
self.vm = new MyVM();

this.pushSlow = function(arrayToBePushed){
    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        self.vm.fooObsArray.push(element);          //notifies ui foreach of elements => + delay
    }
}

this.pushFast = function(arrayToBePushed){
    var underlyingArray = self.vm.fooObsArray();

    for (int i = 0; i < arrayToBePushed.length; i++){
        var element = arrayToBePushed[i];
        underlyingArray.push(element);
    }

    self.vm.fooObsArray.valueHasMutated();          //notifies ui once all elements have been added => - delay
}
}

Answer 3

I am pulling about 850 items into my view model and them displaying them in a select. Pushing in a loop took about 15 seconds and had linear degradation.

I used the valueHasMutated solution here: http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

Down to about 200ms (overall - including round-trip to server, db read, etc)

Answer 4

Of course you can make changes in your code, as suggested in the other answers. Another alternative is to use my Deferred Updates plugin: https://github.com/mbest/knockout-deferred-updates

The plugin will automatically delay any updates to the UI (or to any computed observables) until after all changes are done in the current "thread".

Answer 5

Maybe another solution is to insert your elements from the array, into the observable array by chunks of 20 or 50 items ?

Since you will be adding items to an observablearray, knockout will display them as you add them, but it might help you reduce the amount of CPU needed, since you will be able to add a delay between each chunk.

Might worth a try.