Geek asks and answers

How to increase productivity by reducing DOM manipulation?

In the example below, Knockout calls HTMLElement.appendChild18 times to display a template. It does not use DocumentFragment, so each of these 18 operations is performed in a real DOM that causes transitions. Ideally, there should be only one call appendChildin the real DOM.

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

JS BIN with 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>
+3
source share
1 answer

My 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

+3

More articles:


All Articles