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

Question

在下面的简单示例中，Knockout 调用了 18 次 HTMLElement.appendChild 来呈现模板。它不使用 DocumentFragment，因此这 18 个操作中的每一个都是在导致回流的实时 DOM 上进行的。理想情况下，在实时 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

我的 Repeat plugin提供可用作 foreach 绑定(bind)的替代方法的绑定(bind)。它在许多情况下速度更快，因此您只需要进行试验以比较性能。

为了比较，下面是使用 repeat 绑定(bind)示例的方式:

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

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