在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。

但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。 

documentFragment 被所有主流浏览器支持。所以，没有理由不用。

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此，使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

var container = document.getElementById("container");
var content = document.getElementById("content");
// Content Generator
var size = 400;
var frag = document.createDocumentFragment();
for (var cell=0, cl=content.clientWidth/size; cell<cl; cell++) {
    elem = document.createElement("div");
    elem.className = "cell";
    elem.style.backgroundColor = cell%2 > 0 ? "#ddd" : "";
    elem.innerHTML = cell;
    frag.appendChild(elem);
}
content.appendChild(frag);

Mozilla居然有中文的这种文档，真棒！
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment



真诚赞赏，手留余香

微信支付