第 119 期(JavaScript-DOM)：DocumentFragment - 文档片段

[wingmeng]

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);