CODEWITHSUNDEEP
javascriptperformancedomknockout.js
Konrad Dzwinel
Konrad Dzwinel

Reputation: 37913

How to improve performance by reducing DOM manipulation?

In the simple example below, Knockout calls HTMLElement.appendChild 18 times to render the template. It doesn't use DocumentFragment, so each of these 18 operations are made on the live DOM causing reflows. Ideally, there should be only one call to appendChild on the live DOM.

This really hurts performance, does anyone know how to reduce the damage?

JS BIN with the code.

JavaScript

var viewModel = {
  people:[
    {name: 'Tim'},
    {name: 'John'},
    {name: 'Greg'}
  ]
};

ko.applyBindings(viewModel, document.getElementById('list1'));

HTML

<ul id='list1' data-bind="foreach: { data: people }">
  <li>
      <h3 data-bind="text: name"></h3>
  </li>
</ul>

Upvotes: 3

Views: 2627

Answers (1)

Michael Best
Michael Best

Reputation: 16688

My Repeat plugin provides a binding that can be used as an alternative to the foreach binding. It's faster in many cases, so you'll just need to experiment to compare the performance.

For comparison, here's how you'd bind your example using repeat:

<ul id='list1'>
  <li data-bind="repeat: people">
    <h3 data-bind="text: $item().name"></h3>
  </li>
</ul>

http://jsbin.com/lizi/7/edit

Upvotes: 3

Related Questions