请教一个问题

同学你好，

document.createFragment（）方法常用于向document中添加大量数据时，如果直接添加新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法，为了解决这个问题，可以创建一个文档片段，把所有的新节点附加其上，然后把文档碎片一次性添加到document中。

例如，假如想创建十个段落，使用常规的方式可能会写出这样的代码：

for(var i = 0 ; i < 10; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    document.body.appendChild(p);
}

这段代码运行是没有问题，但是调用了十次document.body.appendChild()，每次都要产生一次页面渲染，这时文档片段就十分有用了：

var oFragment = document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {    
    var p = document.createElement("p");    
    var oTxt = document.createTextNode("段落" + i);    
    p.appendChild(oTxt);    
    oFragment.appendChild(p);
}    
document.body.appendChild(oFragment);

在这段代码中，每个新的<p />元素都被添加到文档片段中，然后这个片段被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档片段本身追加到body元素中，而是仅仅追加片段中的子节点，然后可以看到明显的性能提升，document.body.appenChild()一次替代十次，这意味着只需要进行一个内容渲染刷新。DOM中也不会出现片段oFragment标签，只有里面的内容：

自己可以测试理解下，祝学习愉快！