如何通过减少DOM操作来提高性能？

Question

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>

Answer 1

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