ko.observableArray() is very slow for 1000+ <div> elements

jquery, knockout.js

Solution

You can get a decent improvement in Chrome by removing the text nodes surrounding your "template" like: http://jsfiddle.net/rniemeyer/RAfNv/.

<!-- ko foreach: Items --><div data-bind="text: $data"></div><!-- /ko -->

I think we will be looking to improve this in the core at some point. We had looked at something like this before: https://github.com/SteveSanderson/knockout/pull/709, but did not end up adding any changes at this point.

Problem

Please see my jsfiddler for the example. http://jsfiddle.net/cYYEt/ If there is another way we should be binding/creating our array/etc that would work too. I have solved this problem by either using a list or spans Thanks! JS ``` var mainViewModel = function () { var self = this; this.Items = ko.observableArray(); this.init = function () { var itemsArray = []; for(var i = 0; i < 1300; i++){ itemsArray.push("My value is: " + i); } self.Items(itemsArray ); }; }; $(function () { myApp = new mainViewModel(); ko.applyBindings(myApp); myApp.init(); });​ ``` HTML ``` <!-- ko foreach: Items --> <div data-bind="text: $data"></div> <!-- /ko -->​ ```

Original source