DOM插入操作优化：DocumentFragment

在进行DOM操作中，我们经常使用新建元素然后将其插入到文档中的操作。若是非常小（对页面的改动很小）的插入操作或许在性能上没有什么，但是若需要很多的插入操作和改动，继续使用类似于下面的代码则会很有问题。

var ul = document.getElementById("ul");
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    ul.appendChild(li);
}

由于每一次对文档的插入都会引起重新渲染（计算元素的尺寸，显示背景，内容等），所以进行多次插入操作使得浏览器发生了很多次渲染，效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差，很难符合创建各种各样的DOM元素的需求。利用DocumentFragment，可以弥补这两个方法的不足。

DocumentFragment是没有父节点的最小的文档对象，用于存储HTML和XML片段。DocumentFragment对象继承Node，所以它有Node的所有属性方法，完全可以操作Node(NodeList)那样操作DocumentFragment。此外W3C对DocumentFragment也定义了一些另外的属性和方法，但是由于多数浏览器都没有实现，从兼容性上来说不推荐使用这些属性。具体有哪些属性方法可以参考MDN说明。

创建DocumentFragment的方法有两种，document.createDocumentFragment()和new Fragment()。对于document.createDocumentFragment()，所有浏览器都支持（包括IE6），而构造函数方法就不是所有浏览器都有效了（IE没有实现该方法）。所以从兼容性上来说推荐使用document.createDocumentFragment()。

上面也提到，使用DocumentFragment与一般的Node无异，可以当作是DOM对象一样操作。在使用appendChild，insertBefore等方法时，被添加（插入）的是片段的所有子节点，而非本身。

因为文档片段存在于内存中，并不在DOM中，所以将子元素插入到文档片段中时不会引起页面回流（对元素位置和几何上的计算），因此使用DocumentFragment可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。

var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;

    fragment.appendChild(li);
}
ul.appendChild(fragment);

由于DocumentFragment的优势，很多javascript库都是用它来创建HTML的，包括jquery。