看到有的地方创建元素节点的时候，使用
createDocumentFragment，而不是使用createElement，因此比较好奇，查看二者的差异，主要是对性能影响比较大,如果对dom节点存在大量的增删操作的话，建议使用createDocumentFragment，可以减少浏览器的重绘及回流。
相关代码如下：
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(),
child;
// 将原生节点拷贝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
},
复制代码createElement
var e1 = document.createElement('div');
console.log(e1.nodeType); // 1
复制代码- 是元素节点，nodeType=1
- 作用：用于创建一个由标签名称
tagName指定的 HTML 元素 - 追加元素，可以使用
appendChild,- 该方法是将一个节点附加到指定父节点的子节点列表末尾处
- 这个节点已经存在当前文档树中，那么它的位置会发生移动，移动到新的位置
- 该节点插入方式，是插入
它本身和它的所有子孙节点 - 插入页面后，依旧可以对该节点重复操作，只是重复多次发生位置移动问题。
createDocumentFragment
var e2 = document.createDocumentFragment();
console.log(e2.nodeType); // 11
复制代码- 是文档碎片，nodeType=11
- 作用：创建一个新的空白的文档片段
- 意义：文档片段存在与内存中，并不在DOM树种，将子元素插入到文档片段时不会引起页面回流
- 追加元素，可以使用
appendChild,- 该方法是将一个节点附加到指定父节点的子节点列表末尾处
- 这个节点已经存在当前文档树中，那么它的位置会发生移动，移动到新的位置
- 该节点插入方式，是插入
所有子孙节点 - 如果该文档片段，被追加到某个节点下，就不能在对它操作，它属于
一次性操作。(用白话文说，用createDocumentFragment创建的文档节点，被添加到某个元素下，文档碎片里的内容就没了，然后再让他继续添加到其他元素下，是不会成功的，除非是内容重新追加到文档节点里)
<body>
<div id="aaaa">
<div id="b">
<div id="b1"></div>
<div id="b2"></div>
</div>
<div id="c">
<div id="a1"></div>
<div id="a2"></div>
</div>
</div>
<div id="dddd"></div>
<div id="ffff"></div>
<div id="gggg"></div>
</body>
</html>
<script>
window.onload=function(){
var el = document.getElementById("aaaa")
var fragment = document.createDocumentFragment(),
child;
// 将原生节点拷贝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
document.getElementById("dddd").appendChild(fragment)// 文档碎片里的内容已经被填充进去，如果再填充到对应的节点下，是没有内容的
fragment.appendChild(document.getElementById("gggg"))// 重新追加内容到碎片里，追到新的元素节点下
document.getElementById("ffff").appendChild(fragment)
}
</script>
复制代码
