DocumentFragment是一种轻量级的文档，在文档中没有任何标记，可以包含和控制文本,但不会占用额外的资源。
一般操作一个ul，并且给ul动态添加li节点，会使用下面的方式：
<ul id="list"></ul>var ul = document.getElementById('list');
var li = null;
for(var i = 0; i<3; i++){
li = document.createElement('li');
li.appendChild( document.createTextNode('hello world' + i) );
ul.appendChild(li);
}
这样做会有个弊端。会导致浏览器反复渲染新的节点。
可以使用DocumentFragment来保存创建的列表项，然后一次性把它们添加到文档里。
var fragment = document.createDocumentFragment();
var ul = document.getElementById('list');
var li = null;
for(var i = 0; i<3; i++){
li = document.createElement('li');
li.appendChild( document.createTextNode('hello world' + i) );
fragment.appendChild(li);
}
ul.appendChild(fragment)
这两种方式，最终呈现的效果是相同的。
文档片段DocumentFragment中的列表项会被删除并且转移到ul中。