Web前端性能優化——DocumentFragment或innerHTML取代複雜的元素注入


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

另外一種優化的方法就是使用 innerHTML:

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

這樣的方式比起 DocumentFragment 的代碼量更少。

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



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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章