创建文档片段，优化渲染性能

节点类型中有一种类型叫DocumentFragment，即文档片段。文档片段是一种“轻量级”的文档，可以控制节点，但是又不会占用过多资源。

　　nodeType：11；

　　nodeName：“#document-fragment”；

　　nodeValue：null；

 

由于每次我们在操作某个节点的时候，无论是移动，删除，还是添加，都会导致浏览器重绘整个树结构，这个代价是很昂贵的。如果我们一次要添加多个节点到树结构中，那么我们就需要多次重绘树结构。

使用文档片段就很好的帮我们解决了这个问题。我们可以创建一个文档片段，将我们的需要添加的新节点用同样的方式添加到文档片段中，添加完成后，再将这个文档片段添加到文档结构中，浏览器最终就只会重绘一次。而且将文档片段中的节点添加到文档结构中后，文档片段的childNodes也会被移除。

　　var fragment = document.createDocumentFragment();
　　var ul = document.createElement('ul');
　　fragement.appendChild( ul );
 　 document.getElementById('myDiv').appendChild( fragement );

转载于:https://www.cnblogs.com/iRidescent-ZONE/archive/2012/07/08/2581938.html