前端性能優化第三篇-documentFragment

雖然說是第三篇，但是其實算作對第二篇的補充比較合适，沒有看第二篇的小夥伴可以戳下面的連結～

前端性能優化第二篇

前戲

在第二篇中提到了回流和重繪，一個重要的優化政策就是在建立dom節點的時候将建立多個節點的操作變為一次操作。下面我以我做的一個小項目——服務中心課表查詢中的部分代碼為例進行一下說明。

栗子

抱歉抱歉這是我奇怪的課程表，僅僅是為了說明我要做什麼，呈現課程表的時候在下面的通過一個表格做背景，來顯示出第幾節課。

平常的做法

在使用documentFragment之前我的做法大緻是這樣的

let table = document.getElementById("u-table");
for(let i = ;i<;i++){
    let tempTr = document.createElement("tr");
    for(let j = ;j<;j++){
        let tempTd = document.createElement("td");
        tempTr.appendChilda(tempTd);
    }
    table.appendChild(tempTr);
}
           

上面向table中添加了65個子節點，相應的，頁面就要進行65次回流想想就很可怕。

使用documentFragment的改進政策

為了減少回流次數，我們可以如此這般

// 建立一個文檔碎片
let fragment = document.createDocumentFragment();
// 将所有的單元格都塞進這個fragment中
for(let i = ;i<;i++){
    let tempTr = document.createElement("tr");
    for(let j = ;j<;j++){
        let tempTd = document.createElement("td");
        tempTr.appendChild(tempTd);
    }
    fragment.appendChild(tempTr);
}
// 直接将文檔碎片塞到table裡
table.appendChild(fragment);
           

這樣僅僅進行了一次重繪就完成了，amazing～

其他

浏覽器相容性

這麼好用的東西，萬一不支援怎麼辦，是以特别奉上浏覽器支援情況

隻要關心第一行basic support，全部支援

so，放心大膽地使用吧～

參考：MDN文檔