Question

在下面的简单示例中，Knockout调用HTMLElement.appendChild 18次来呈现模板。它不使用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绑定的替代方法。在许多情况下它会更快，因此您只需要进行实验来比较性能。

为了进行比较，以下是使用repeat绑定示例的方式：

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

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

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

1 个答案: