DOM 操作對於前端效能的影響是舉足輕重的，如何減少 DOM 節點的建立以及快速注入是特別重要的。

假設頁面中有一個 <ul> 元素，需要動態建立多個 <li> 子節點，常規的寫法是

var list = document.getElementsByTagName("ul");
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //對 li 進行操作，如新增屬性，插入子節點，新增事件監聽等
    list[0].appendChild(li);
}

這段程式碼的效能是非常差的，每一次的迴圈都要對 DOM 進行一次插入操作，這時應該考慮使用 DocumentFragment。

DocumentFragment 文件片段，可以包含和控制節點，但是不會佔用資源，文件片段中的節點並不會存在於 DOM 樹中。

var list = document.getElementsByTagName("ul");
var frag = document.createDocumentFragment();
for(var i = 0 ; i < 5 ; i ++){
    var li = document.createElement("li");
    //對 li 進行操作，如新增屬性，插入子節點，新增事件監聽等。
    frag.appendChild(li);
}
list[0].appendChild(frag);
 

var listStr = "";
for(var i = 0 ; i < 5 ; i ++){
    listStr += "<li>" + i + "</li>";
}
document.getElementsByTagName("ul")[0].innerHTML = listStr;

但是兩種方法比起每次迴圈都注入HTML元素是更加高效的。

參考：http://www.gbtags.com/gb/share/1215.htm