JavaScript 中的文档碎片 DocumentFragement
文档碎片是什么：
如果我们要在一个 ul 中添加 100 个 li，如果不使用文档碎片，那么我们就需要使用 append 经常 100 次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将 100 个 li 添加到文档碎片中，然后直接把这个文档碎片追加到 ul 中即可。所以文档碎片其实就是一个临时的仓库。如下代码在 document.body 中添加 5 个 span：
for(var i=0;i<5;i++)
{
var op = document.createElement(“span”);
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
对于少量的更新，一条条循环插入的运行也还可以。但是，当要向 document 中添加大量数据（比如 1w 条），如果像上面的代码一样，逐条添加节点，整个过程会十分缓慢，性能极差。也可以建一个新的节点，例如 div，先将 span 添加到 div 上，然后再将 div 添加到 body:
var oDiv = document.createElement(“div”);
for(var i=0;i<10000;i++)
{
var op = document.createElement(“span”);
var oText = document.createTextNode(i);
op.appendChild(oText);
oDiv.appendChild(op);
}
document.body.appendChild(oDiv);
但这样会在 body 中多添加一个 div 节点。用文档碎片就不会产生这种节点，引入 createDocumentFragement() 方法，它的作用是创建一个文档碎片，把要插入的新节点先插入它里面，然后再一次性地添加到 document 中。代码如下：
// 先创建文档碎片
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var op = document.createElement(“span”);
var oText = document.createTextNode(i);
op.appendChild(oText);
// 先附加在文档碎片中
oFragmeng.appendChild(op);
}
// 最后一次性添加到 document 中
document.body.appendChild(oFragmeng);