前端最佳實踐——DOM操做

一、瀏覽器渲染原理

在講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 文檔解析完畢以後，就會開始構建呈現樹和設置佈局。在不斷接收和處理來自網絡的其他內容的同時，瀏覽器會將部份內容解析並顯示出來。

二、Repaints and reflows

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

迴流或者重繪什麼時候觸發？

改變用於構建渲染樹的任何內容均可能致使重繪或迴流，例如：
一、添加，刪除，更新DOM節點
二、用display: none（迴流和重繪）或者visibility: hidden隱藏節點（只有重繪，由於沒有幾何更改）
三、添加樣式表，調整樣式屬性
四、調整窗口大小，更改字體大小
五、頁面初始化的渲染
六、移動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）從新創建後，瀏覽器會從新繪製頁面上受影響的元素。重排的代價比重繪的代價高不少，重繪會影響部分的元素，而重排則有可能影響所有的元素。

三、DOM操做最佳實踐

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

3.一、合併屢次的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.二、讓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.三、使用局部變量緩存樣式信息

獲取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.四、 設置具備動畫效果的DOM元素爲固定定位

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

四、dom操做性能查看

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

4.1.二、按下ctrl + E（或者點擊小圓點）開始錄製，點擊 body 區域，待文字變成綠色後點擊「stop」中止錄製

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

4.1.四、點擊圓點旁邊的clear按鈕清空，重複上述的操做，直到文字變藍色中止：

 

4.二、頻繁迴流形成的影響

谷歌文檔給的例子，連接地址以下：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」優化按鈕，能夠明顯感覺出差距。