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

Question

在下面的简单示例中，敲除调用 HTMLElement.appendChild 18次渲染模板。它不使用DocumentFragment，因此在实时DOM上进行了这18个操作，从而引起了Replows。理想情况下，现场DOM上应该只有一个呼叫appendChild。

这确实损害了性能，有人知道如何减少伤害吗？

---

js bin带代码。

---

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

我的重复插件提供了一个绑定，可以用作foreach绑定的替代品。在许多情况下，它更快，因此您只需要试验即可比较性能。

进行比较，这是您使用repeat绑定示例的方式：

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

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