WEB(四)_js的createDocumentFragment()方法

摘要: 循环多个创建子节点，放置都会使页面渲染一次，性能上不是最优选，可以使用createDocumentFragment方法来一次性放置，性能上有很大的提高

1.创建文档碎片节点

createDocumentFragment()

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

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

EP：jQeury写法

当然如果用jQuery可以把子节点追加到一个变量中，最后用.html(chil)添加到想要的父标签中：

var chil;
for(var i = 0 ; i < 10; i ++){
chil+="<p>段落"+i+"</p>";
}
//没有业务上的顺序问题用以下方法
$('parentchil').html(chil);
//有顺序要求
//向父标签后添加
$('parentchil').append(chil);
//向父标签前添加
$('parentchil').prepend(chil);

作者：五谷子（wuguzi）