【編者按】其實，有關網頁渲染的文章很多，但是相關資訊比較分散，且論述並不是很完整。如果要想對這個主題有個大致的瞭解，我們還得學習很多知識。因此，Web開發者Alexander Skutin 決定寫一篇文章。他相信，這篇文章不僅能幫助初學者，也能對那些想要重新整理知識結構的高階前端開發者有所裨益。原文地址

譯文如下：

網頁渲染必須在很早的階段進行，可以早到頁面佈局剛剛定型。因為樣式和指令碼都會對網頁渲染產生關鍵性的影響。所以專業開發者必須瞭解一些技巧，從而避免在實踐的過程中遇到效能問題。

這篇文章不會研究瀏覽器內部的詳細機制，而是提出一些通用的規則。畢竟，不同瀏覽器引擎的工作機制各不相同，這無疑會讓開發者對瀏覽器特性的研究變得更加複雜。

瀏覽器是如何完成網頁渲染？

首先，我們回顧一下網頁渲染時，瀏覽器的動作：

1. 根據來自伺服器端的HTML程式碼形成文件物件模型（DOM）
2. 載入並解析樣式，形成CSS物件模型。
3. 在文件物件模型和CSS物件模型之上，建立一棵由一組待生成渲染的物件組成的渲染樹（在Webkit中這些物件被稱為渲染器或渲染物件，而在Gecko中稱之為“frame”。）渲染樹反映了文件物件模型的結構，但是不包含諸如標籤或含有display:none屬性的不可見元素。在渲染樹中，每一段文字字串都表現為獨立的渲染器。每一個渲染物件都包含與之對應的DOM物件，或者文字塊，還加上計算過的樣式。換言之，渲染樹是一個文件物件模型的直觀展示。

4. 對渲染樹上的每個元素，計算它的座標，稱之為佈局。瀏覽器採用一種流方法，佈局一個元素只需通過一次，但是表格元素需要通過多次。

5. 最後，渲染樹上的元素最終展示在瀏覽器裡，這一過程稱為“painting”。

當用戶與網頁互動，或者指令碼程式改動修改網頁時，前文提到的一些操作將會重複執行，因為網頁的內在結構已經發生了改變。

重繪

當改變那些不會影響元素在網頁中的位置的元素樣式時，譬如background-color(背景色)， border-color(邊框色)， visibility(可見性)，瀏覽器只會用新的樣式將元素重繪一次(這就是重繪，或者說重新構造樣式)。

重排

當改變影響到文字內容或結構，或者元素位置時，重排或者說重新佈局就會發生。這些改變通常由以下事件觸發：

• DOM操作（元素新增，刪除，修改，或者元素順序的改變）;
• 內容變化，包括表單域內的文字改變;
• CSS屬性的計算或改變;
• 新增或刪除樣式表;
• 更改“類”的屬性;
• 瀏覽器視窗的操作（縮放，滾動）;
• 偽類啟用（：懸停）。

瀏覽器如何優化渲染？

瀏覽器儘可能將重繪/重構 限制在被改變元素的區域內。比如，對於位置固定或絕對的元素，其大小改變隻影響元素本身及其子元素，然而，靜態定位元素的大小改變會觸發後續所有元素的重流。

另一種優化技巧是，在執行幾段JavaScript程式碼時，瀏覽器會快取這些改變，在程式碼執行完畢後再將這些改變經一次通過加以應用。舉個例子，下面這段程式碼只會觸發一個重構和重繪：

1. var $body = $('body');
2. $body.css('padding','1px');// reflow, repaint
3. $body.css('color','red');// repaint
4. $body.css('margin','2px');// reflow, repaint
5. // only 1 reflow and repaint will actually happen

然而，如前所述，改變元素的屬性會觸發強制性的重排。如果我們在上面的程式碼塊中加入一行程式碼，用來訪問元素的屬性，就會發生這種現象。

1. var $body = $('body');
2. $body.css('padding','1px');
3. $body.css('padding');// reading a property, a forced reflow
4. $body.css('color','red');
5. $body.css('margin','2px');

其結果就是，重排發生了兩次。因此，你應該把訪問元素屬性的操作都組織在一起，從而優化網頁效能。（你可以在JSBin查到更為詳細的例子）

有時，你必須觸發一個強制性重排。比如，我們必須將同樣的屬性(比如左邊距)兩次賦值給同一個元素。起初，它應該設定為100px，且不帶動效。接著，它必須通過過渡(transition)動效改變為50px。你現在可以在JSbin上學習這個例子，不過我會在這兒更詳細地介紹它。

首先，我們建立一個帶過渡效果的CSS類：

1. .has-transition {
2. -webkit-transition: margin-left 1s ease-out;
3. -moz-transition: margin-left 1s ease-out;
4. -o-transition: margin-left 1s ease-out;
5. transition: margin-left 1s ease-out;
6. }

然後繼續執行：

1. // our element that has a "has-transition" class by default
2. var $targetElem = $('#targetElemId');
3. // remove the transition class
4. $targetElem.removeClass('has-transition');
5. // change the property expecting the transition to be off, as the class is not there
6. // anymore
7. $targetElem.css('margin-left',100);
8. // put the transition class back
9. $targetElem.addClass('has-transition');
10. // change the property
11. $targetElem.css('margin-left',50);

然而，這個執行無法奏效。所有改變都被快取，只在程式碼塊末尾加以執行。我們需要的是強制性的重排，我們可以通過以下更改加以實現：

1. // remove the transition class
2. $(this).removeClass('has-transition');
3. // change the property
4. $(this).css('margin-left',100);
5. // trigger a forced reflow, so that changes in a class/property get applied immediately
6. $(this)[0].offsetHeight;// an example, other properties would work, too
7. // put the transition class back
8. $(this).addClass('has-transition');
9. // change the property
10. $(this).css('margin-left',50);

現在程式碼如預期那樣執行了。

有關效能優化的實際建議

總結現有的資料，我提出以下建議：

• 建立有效的HTML和CSS檔案，不要忘記指明文件的編碼方式。樣式應該包含在標籤內，指令碼程式碼則應該加在標籤末端。

• 儘量簡化和優化CSS選擇器（這種優化方式幾乎被使用CSS前處理器的開發者統一忽視了）將巢狀程度保持在最低水平。以下是CSS選擇器的效能排名（從最快者開始）

  1. 識別器:#id
  2. 類:.class
  3. 標籤：div
  4. 相鄰兄弟選擇器：a + i
  5. 父類選擇器：ul> li
  6. 通用選擇器：*
  7. 屬性選擇：input[type="text"]
  8. 偽類和偽元素：a:hover

你應該記住，瀏覽器在處理選擇器時依照從右到左的原則，因此最右端的選擇器應該是最快的：#id或則.class：

1. div *{...}// bad
2. .list li {...}// bad
3. .list-item {...}// good
4. #list .list-item {...} // good

• 1.在你的指令碼程式碼中，儘可能減少DOM操作。快取所有東西，包括元素屬性以及物件（如果它們被重用的話）。當進行復雜的操作時，使用“孤立”元素會更好，之後可以將其加到DOM中（所謂“孤立”元素是與DOM脫離，僅儲存在記憶體中的元素）。

• 2.如果你使用jQuery來選擇元素，請遵從jQuery選擇器最佳實踐方案。

• 3.為了改變元素的樣式，修改“類”的屬性是奏效的方法之一。執行這一改變時，處在DOM渲染樹的位置越深越好（這還有助於將邏輯與表象脫離）。

• 4.儘量只給位置絕對或者固定的元素新增動畫效果。

• 5.在使用滾動時禁用複雜的懸停動效（比如，在中新增一個額外的不懸停類）。讀者可以閱讀關於這個問題的一篇文章。

想了解更多的細節問題，大家也可以看看這兩篇文章：