前端最佳實踐（一）——DOM操作

wengjq發表於2019-03-04
前端

前言

本文是博主最近處理一些網站卡頓問題的學習記錄。
原文地址：前端最佳實踐（一）——DOM操作，覺得有用的話可以給個star，謝謝啦。
作者:wengjq

1、瀏覽器渲染原理

在講DOM操作的最佳效能實踐之前，先介紹下瀏覽器的基本渲染原理。瀏覽器渲染展示網頁的主流程大致可以用下圖表示：

圖：WebKit 主流程
圖：WebKit 主流程

分為以下四個步驟：

  • 解析HTML(HTML Parser)

  • 構建DOM樹(DOM Tree)

  • 渲染樹構建(Render Tree)

  • 繪製渲染樹(Painting)

瀏覽器請求解析（Parser） HTML 文件，並將各標記逐個轉化成 DOM 節點（DOM Tree）。同時也會解析外部 CSS 檔案以及樣式元素中的樣式資料。HTML 中這些帶有視覺指令的樣式資訊將用於建立另一個樹結構：呈現樹（Render Tree）。呈現樹（Render Tree）包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在螢幕上顯示的順序。呈現樹（Render Tree）構建完畢之後，進入“佈局”處理階段，也就是為每個節點分配一個應出現在螢幕上的確切座標。下一個階段是繪製（Painting） – 瀏覽器會遍歷呈現樹（Render Tree），由使用者介面後端層將每個節點繪製出來。

需要著重指出的是，這是一個漸進的過程。為達到更好的使用者體驗，瀏覽器會力求儘快將內容顯示在螢幕上。它不必等到整個 HTML 文件解析完畢之後，就會開始構建呈現樹和設定佈局。在不斷接收和處理來自網路的其餘內容的同時，瀏覽器會將部分內容解析並顯示出來。

2、Repaints and reflows

Repaint：可以理解為重繪或重畫，當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，例如改變背景顏色 。則就叫稱為重繪。
Reflows：可以理解為迴流、佈局或者重排，當渲染樹（render Tree）中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱為迴流（reflow），也就是重新佈局（relayout）。

迴流或者重繪何時觸發？

改變用於構建渲染樹的任何內容都可能導致重繪或迴流，例如：
1、新增，刪除，更新DOM節點
2、用display: none（迴流和重繪）或者visibility: hidden隱藏節點（只有重繪，因為沒有幾何更改）
3、新增樣式表，調整樣式屬性
4、調整視窗大小，更改字型大小
5、頁面初始化的渲染
6、移動DOM元素
。。。

我們來看幾個例子：

var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // another reflow and a repaint

bstyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode(`dude!`));複製程式碼

我們可以想象一下，如果直接在渲染樹（render Tree）最後面增加或者刪除一個節點，這對於瀏覽器渲染頁面來說無傷大雅，因為只需要在渲染樹（render Tree）的末端重繪那一部分變動的節點。但是，如果是在頁面的頂部變動一個節點，瀏覽器需要重新計算渲染樹（render Tree），導致渲染樹（render Tree）的一部分或全部發生變化。渲染樹（render Tree）重新建立後，瀏覽器會重新繪製頁面上受影響的元素。重排的代價比重繪的代價高很多，重繪會影響部分的元素，而重排則有可能影響全部的元素。

3、DOM操作最佳實踐

DOM操作帶來的頁面 Repaints 和 Reflows 是不可避免的，但可以遵循一些最佳實踐來最大限度地減少Repaints 和 Reflows。如下是一些具體的實踐方法：

3.1、合併多次的DOM操作

// bad
var left = 10,
  top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// better 
el.className += " theclassname";
// better
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";複製程式碼

由於與渲染樹更改相關的 Repaints and Reflows 是代價非常高，因此現代瀏覽器針對頻繁的 Repaints and Reflows 有效能的優化。 一個策略是瀏覽器將設定指令碼所需更改的佇列，並分批執行。 這樣，每個需要 Reflows 的幾個變化將被組合，並且將僅計算一個 Reflows 。 瀏覽器可以新增排隊的更改，然後在一定時間過去或達到一定數量的更改後重新整理佇列（並不是所有的瀏覽器都存在這樣的優化。推薦的方式是把DOM操作儘量合併）。但有時指令碼可能會阻止瀏覽器優化 Reflows ，並使其重新整理佇列並執行所有批量更改。 當您請求如下樣式資訊時（並非包含全部），會發生這種情況。見下圖：

以上所有這些基本上都是請求有關節點的樣式資訊，瀏覽器必須提供最新的值。 為了做到這一點，它需要應用所有計劃的更改，重新整理佇列，強行迴流。所以在有大批量DOM操作時，應避免獲取DOM元素的佈局資訊，使得瀏覽器針對大批量DOM操作的優化不被破壞。如果需要這些佈局資訊，最好是在DOM操作之前就去獲取。

//bad
var bstyle = document.body.style;

bodystyle.color = `red`;
tmp = computed.backgroundColor;

bodystyle.color = `white`;
tmp = computed.backgroundImage;

bodystyle.color = `green`;
tmp = computed.backgroundAttachment;

//better
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;

bodystyle.color = `yellow`;
bodystyle.color = `pink`;
bodystyle.color = `blue`;複製程式碼

3.2、讓DOM元素脫離渲染樹（render Tree）後修改

（1）使用文件片段
DocumentFragments 是DOM節點。它們不是主DOM樹的一部分。通常的用例是建立文件片段，將元素附加到文件片段，然後將文件片段附加到DOM樹。在DOM樹中，文件片段被其所有的孩子所代替。因為文件片段存在於記憶體中，並不在DOM樹中，所以將子元素插入到文件片段時不會引起頁面迴流（Reflow）。當然，最後一步把文件片段附加到頁面的這一步操作還是會造成迴流（Reflow）。

var fragment = document.createDocumentFragment();
// 一些基於fragment的大量DOM操作
...
document.getElementById(`myElement`).appendChild(fragment);複製程式碼

（2）通過設定DOM元素的display樣式為none來隱藏元素
原理是先隱藏元素，然後基於元素做DOM操作，經過大量的DOM操作後才把元素顯示出來。

var myElement = document.getElementById(`myElement`);
myElement.style.display = `none`;
// 一些基於myElement的大量DOM操作
...
myElement.style.display = `block`;複製程式碼

（3）克隆DOM元素到記憶體中
這種方式是把頁面上的DOM元素克隆一份到記憶體中，然後再在記憶體中操作克隆的元素，操作完成後使用此克隆元素替換頁面中原來的DOM元素。

var old = document.getElementById(`myElement`);
var clone = old.cloneNode(true);
// 一些基於clone的大量DOM操作
...
old.parentNode.replaceChild(clone, old);複製程式碼

3.3、使用區域性變數快取樣式資訊

獲取DOM的樣式資訊會有效能的損耗，所以如果存在迴圈呼叫，最佳的做法是儘量把這些值快取在區域性變數中。

// bad
function resizeAllParagraphsToMatchBlockWidth() {
    for (var i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + `px`;
    }
}

// better
var width = box.offsetWidth;
function resizeAllParagraphsToMatchBlockWidth() {
    for (var i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + `px`;
    }
}複製程式碼

3.4、 設定具有動畫效果的DOM元素為固定定位

使用絕對定位使得該元素在渲染樹中成為 body 下的一個直接子節點，因此當它進行動畫時，它不會影響太多其他節點。

4、具體例子

4.1、瀏覽器的批處理及迴流

以下會通過一個具體例子來說明，連結地址如下：reflow。

第一次點選的程式碼如下：

function touch() {
    bodystyle.color = `red`;
    bodystyle.padding = `1px`;
    tmp = computed.backgroundColor;
    bodystyle.color = `white`;
    bodystyle.padding = `2px`;
    tmp = computed.backgroundImage;
    bodystyle.color = `green`;
    bodystyle.padding = `3px`;
    tmp = computed.backgroundAttachment;
}複製程式碼

第二次點選的程式碼如下：

function touchlast() {
    tmp = computed.backgroundColor;
    tmp = computed.backgroundImage;
    tmp = computed.backgroundAttachment;
    bodystyle.color = `yellow`;
    bodystyle.padding = `4px`;
    bodystyle.color = `pink`;
    bodystyle.padding = `5px`;
    bodystyle.color = `blue`;
    bodystyle.padding = `6px`;
}複製程式碼

以下我們將通過谷歌工具來檢視這兩次操作有什麼異同。

4.1.1、首先用谷歌瀏覽器開啟如上的連結。按下F12，切換到Performance選項

結果如下圖：

4.1.2、按下ctrl + E（或者點選小圓點）開始錄製，點選 body 區域，待文字變成綠色後點選“stop”停止錄製

結果如下圖：

4.1.3、選中上圖中藍色（js堆）突然升高的部分，表示剛才點選body的過程，滾動滑鼠放大主執行緒

結果如下圖，注意箭頭指的地方：

從上圖我們可以很容易看到在點選body的過程中，瀏覽器計算了3次樣式。

4.1.4、點選圓點旁邊的clear按鈕清空，重複上述的操作，直到文字變藍色停止：

結果如下圖，注意箭頭指的地方：

從上圖我們可以很容易看到在再次點選body的過程中，瀏覽器只計算了1次樣式。從而可以證明我們上述的瀏覽器批處理的結論。未優化的Rendering（渲染）時間為0.4ms，而優化後的Rendering（渲染）時間為0.3ms，在這麼小的js執行都有這麼大的差別，在一些操作DOM頻繁的動畫中，浪費的效能可想而知，後面將會有一個動畫的例子可以直觀的看出來。

4.2、頻繁迴流造成的影響

谷歌文件給的例子，連結地址如下：animation。

優化前的程式碼：

var pos = m.classList.contains(`down`) ?
    m.offsetTop + distance : m.offsetTop - distance;
    if (pos < 0) pos = 0;
    if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + `px`;
    if (m.offsetTop === 0) {
        m.classList.remove(`up`);
        m.classList.add(`down`);
    }
    if (m.offsetTop === maxHeight) {
        m.classList.remove(`down`);
        m.classList.add(`up`);
    }複製程式碼

優化後的程式碼：

var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf(`px`)));
    m.classList.contains(`down`) ? pos += distance : pos -= distance;
    if (pos < 0) pos = 0;
    if (pos > maxHeight) pos = maxHeight;
    m.style.top = pos + `px`;
    if (pos === 0) {
        m.classList.remove(`up`);
        m.classList.add(`down`);
    }
    if (pos === maxHeight) {
        m.classList.remove(`down`);
        m.classList.add(`up`);
    }複製程式碼

先節流cpu，然後加多小“谷歌”圖示，直到圖示速度明顯減慢，再點選“Optimize”優化按鈕，可以明顯感受出差距。至於如何節流cpu及定位問題可以參考我的另外一篇文章 什麼？頁面卡頓？操作慢？。

相關文章