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);