第 119 期(JavaScript-DOM):DocumentFragment - 文档片段
wingmeng opened this issue · comments
document.createDocumentFragment()
用于创建一个空白的文档片段(DocumentFragment),文档片段是一种特殊的 DOM 节点,它存在于内存中,并不在 DOM 树中。
通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树,因为子元素插入到文档片段时不会引起页面回流,所以使用文档片段通常会带来更好的性能。
<div id="box"></div>
var box = document.getElementById('box');
// 创建文档碎片
var oFragment = document.createDocumentFragment();
for (var i = 0; i < 1e5; i++) {
var op = document.createElement('p');
var oText = document.createTextNode('第' + (i + 1) + '行');
op.appendChild(oText);
// 先附加在文档碎片中
oFragment.appendChild(op);
}
// 最后一次性添加到 DOM 中
box.appendChild(oFragment);