Javsscript中的fragment

在Javascript中，每当对DOM执行一次操作（插入元素，删除元素等）会出发浏览器的重新解析和渲染，当我们需要一次过进行多次DOM插入操作的时候，可以借助DocumentFragment这个节点类型帮助减少浏览器的重新解析。

假设我们要在下面的<ul/>中插入10个<li/>

<ul id="ul"></ul>

 一般做法：

var ul = document.getElementById("ul");
var li = null;
//循环往<ul/>插入<li/>，每次插入会出发浏览器重新渲染
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    ul.appendChild(li);
}

 使用fragment：

var ul = document.getElementById("ul");
var li = null;
//使用DocumentFragment作为临时节点存放所有<li/>
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("li " + (i+1)));
    fragment.appendChild(li);
}
//一次性把所有<li/>插入<ul/>，只出发一次浏览器重新渲染
ul.appendChild(fragment);