Search code examples
internet-explorerknockout.jsknockout-2.0ko.observablearray

Faster foreach for IE


I use knockout foreach binding to populate UL. After every scroll to the end I fetch next 25 items and add it to the UL. Everything works really fast in Chrome (The best) and Firefox (little slower), but IE 10 takes around 8 times more to display same data as Chrome. To display all data with all bindings Chrome needs around 50ms. IE takes almost 400.

Is there any way to speed up IE rendering? Is there some way to manually insert items and apply binding if it will make it faster.

I do know that I will not remove any element from the list. I can only replace the whole list. Is there some way to use that as an advantage?

This is binding

  <ul class="items-list"
            data-bind="foreach: items>
 <li>
  ....
 </li>
 </ul>

And I add items with this

self.items.push.apply(self.items, newItems); --items are observableArray

Solution

  • One thing that will give you a boost in Chrome and IE is to strip the text nodes around your "template". So, rather than:

    <ul data-bind="foreach: items">
        <li data-bind="text: name"></li>
    </ul>
    

    Do:

    <ul data-bind="foreach: items"><li data-bind="text: name"></li></ul>
    

    The important part is the top-level nodes rather than anything inside the children. Now the li is the only node rather that it and two text nodes. This will allow KO to do less work when processing the "template".