前端效能優化第三篇-documentFragment

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

前戲

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

栗子

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

平常的做法

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

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

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

使用documentFragment的改進策略

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

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

table.appendChild(fragment);

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

其他

瀏覽器相容性

這麼好用的東西，萬一不支援怎麼辦，所以特別奉上瀏覽器支援情況

只要關心第一行basic support，全部支援
so，放心大膽地使用吧～

參考：MDN文件