文档碎片——createDocumentFragment

使用文档碎片在页面中大量添加节点时可以提高性能。

先创建文档碎片，然后将要添加的节点放上去，最后一次性添加到页面中。

html：

1 <div id="box"></div>

js:

1  var box = document.getElementById('box');
2  var frag = document.createDocumentFragment();
3  for(let i = 0; i < 10000; i++) {
4    let p = document.createElement('p');
5    let txt = document.createTextNode(i);
6    p.appendChild(txt);
7    frag.appendChild(p);
8  }
9  box.appendChild(frag);