前端最佳實踐——DOM操作_ZenDei技術網路在線

1、瀏覽器渲染原理在講DOM操作的最佳性能實踐之前，先介紹下瀏覽器的基本渲染原理。分為以下四個步驟：解析HTML(HTML Parser) 構建DOM樹(DOM Tree) 渲染樹構建(Render Tree) 繪製渲染樹(Painting) 瀏覽器請求解析（Parser） HTML 文檔，並 ...

1、瀏覽器渲染原理

在講DOM操作的最佳性能實踐之前，先介紹下瀏覽器的基本渲染原理。

分為以下四個步驟：

解析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元素
。。。

我們來看幾個例子：

 1  
 2 var bstyle = document.body.style; // cache
 3  
 4 bstyle.padding = "20px"; // reflow, repaint
 5  
 6 bstyle.border = "10px solid red"; // another reflow and a repaint
 7  
 8 bstyle.color = "blue"; // repaint only, no dimensions changed
 9  
10 bstyle.backgroundColor = "#fad"; // repaint
11  
12 bstyle.fontSize = "2em"; // reflow, repaint
13  
14 // new DOM element - reflow, repaint
15  
16 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操作

 1  
 2 // bad
 3  
 4 var left = 10,
 5  
 6 top = 10;
 7  
 8 el.style.left = left + "px";
 9  
10 el.style.top = top + "px";
11 
14 // better
15  
16 el.className += " theclassname";
17  
18 // better
19  
20 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

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

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

 1 //bad
 2  
 3 var bstyle = document.body.style;
 4  
 5 bodystyle.color = 'red';
 6  
 7 tmp = computed.backgroundColor;
 8 
 9 bodystyle.color = 'white';
10  
11 tmp = computed.backgroundImage;
12  
13 bodystyle.color = 'green';
14  
15 tmp = computed.backgroundAttachment;
16  
17 
18 //better
19  
20 tmp = computed.backgroundColor;
21  
22 tmp = computed.backgroundImage;
23  
24 tmp = computed.backgroundAttachment;
25  
26  
27 bodystyle.color = 'yellow';
28  
29 bodystyle.color = 'pink';
30  
31 bodystyle.color = 'blue';

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

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

1 var fragment = document.createDocumentFragment();
2  
3 // 一些基於fragment的大量DOM操作
4  
5 ...
6  
7 document.getElementById('myElement').appendChild(fragment);

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

1 var myElement = document.getElementById('myElement');
2  
3 myElement.style.display = 'none';
4  
5 // 一些基於myElement的大量DOM操作
6  
7 ...
8  
9 myElement.style.display = 'block';

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

1 var old = document.getElementById('myElement');
2 var clone = old.cloneNode(true);
3 // 一些基於clone的大量DOM操作
4 ...
5 old.parentNode.replaceChild(clone, old);

3.3、使用局部變數緩存樣式信息

獲取DOM的樣式信息會有性能的損耗，所以如果存在迴圈調用，最佳的做法是儘量把這些值緩存在局部變數中。

 1  
 2 // bad
 3  
 4 function resizeAllParagraphsToMatchBlockWidth() {
 5  
 6 for (var i = 0; i < paragraphs.length; i++) {
 7  
 8 paragraphs[i].style.width = box.offsetWidth + 'px';
 9  
10 }
11  
12 }
13  
14  
15  
16 // better
17  
18 var width = box.offsetWidth;
19  
20 function resizeAllParagraphsToMatchBlockWidth() {
21  
22 for (var i = 0; i < paragraphs.length; i++) {
23  
24 paragraphs[i].style.width = width + 'px';
25  
26 }
27  
28 }

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

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

4、dom操作性能查看

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

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

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

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

4.2、頻繁迴流造成的影響

谷歌文檔給的例子，鏈接地址如下：animation。

優化前的代碼：

 1 var pos = m.classList.contains('down') ?
 2  
 3 m.offsetTop + distance : m.offsetTop - distance;
 4  
 5 if (pos < 0) pos = 0;
 6  
 7 if (pos > maxHeight) pos = maxHeight;
 8  
 9 m.style.top = pos + 'px';
10  
11 if (m.offsetTop === 0) {
12  
13 m.classList.remove('up');
14  
15 m.classList.add('down');
16  
17 }
18  
19 if (m.offsetTop === maxHeight) {
20  
21 m.classList.remove('down');
22  
23 m.classList.add('up');
24  
25 }

優化後的代碼：

 1 var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
 2  
 3 m.classList.contains('down') ? pos += distance : pos -= distance;
 4  
 5 if (pos < 0) pos = 0;
 6  
 7 if (pos > maxHeight) pos = maxHeight;
 8  
 9 m.style.top = pos + 'px';
10  
11 if (pos === 0) {
12  
13 m.classList.remove('up');
14  
15 m.classList.add('down');
16  
17 }
18  
19 if (pos === maxHeight) {
20  
21 m.classList.remove('down');
22  
23 m.classList.add('up');
24  
25 }

先節流cpu，然後加多小“谷歌”圖標，直到圖標速度明顯減慢，再點擊“Optimize”優化按鈕，可以明顯感受出差距。

前端最佳實踐——DOM操作