為什麼每個前端開發者都要理解頁面的渲染？
今天我要將關注點放到頁面渲染以及其重要性上。雖然已經有很多文章提到過這個主題了，但大部分資訊都是零碎的片段。為了思考這件事情，我需要研究很多資訊的來源。這也就是為什麼我覺得我應該寫這篇文章的原因。我相信這篇文章對新手會很有用，並且對想重新整理和鞏固他們已經瞭解的東西的高手也同樣適用。
渲染應該從最開始當頁面佈局被定義時就進行優化，樣式和指令碼在頁面渲染中扮演著非常重要的角色。專業人員知道一些技巧以避免一些效能問題。
這篇文章不會深入研究瀏覽器的技術細節，而是提供一些通用的原則。不同瀏覽器引擎工作原理不同，這就使特定瀏覽器的學習更加複雜。
瀏覽器是怎樣渲染一個頁面的？
我們從瀏覽器渲染頁面的大概過程開始說起：
- 由從伺服器接收到的 HTML 形成 DOM（文件物件模型）。
- 樣式被載入和解析，形成 CSSOM（CSS 物件模型）。
- 緊接著 DOM 和 CSSOM 建立了一個渲染樹，這個渲染樹是一些被渲染物件的集合（ Webkit 分別叫它們”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可見的元素（比如 head 標籤和一些有 display:none 屬性的元素），渲染樹映射了 DOM 的結構。在渲染樹中，每一個文字字串都被當做一個獨立的 renderer。每個渲染物件都包含了與之對應的計算過樣式的DOM 物件（或者一個文字塊）。換句話說，渲染樹描述了 DOM 的直觀的表現形式。
- 對每個渲染元素來說，它的座標是經過計算的，這被叫做“佈局(layout)”。瀏覽器使用一種只需要一次處理的“流方法”來佈局所有元素（tables需要多次處理）。
- 最後，將佈局顯示在瀏覽器視窗中，這個過程叫做“繪製(painting)”。
重繪
當在頁面上修改了一些不需要改變定位的樣式的時候（比如background-color,border-color,visibility)，瀏覽器只會將新的樣式重新繪製給元素（這就叫一次“重繪”或者“重新定義樣式”）。
重排
當頁面上的改變影響了文件內容、結構或者元素定位時，就會發生重排（或稱“重新佈局”）。重排通常由以下改變觸發：
- DOM 操作（如元素增、刪、改或者改變元素順序）。
- 內容的改變，包括 Form 表單中文字的變化。
- 計算或改變 CSS 屬性。
- 增加或刪除一個樣式表。
- 改變”class”屬性。
- 瀏覽器視窗的操作（改變大小、滾動視窗）。
- 啟用偽類（如:hover狀態）。
瀏覽器如何優化渲染？
瀏覽器盡最大努力限制重排的過程僅覆蓋已更改的元素的區域。舉個例子，一個 position 為 absolue 或 fixed 的元素的大小變化隻影響它自身和子孫元素，而對一個 position 為 static 的元素做同樣的操作就會引起所有它後面元素的重排。
另一個優化就是當執行一段Jjavascript 程式碼的時候，瀏覽器會將一些修改快取起來，然後當代碼執行的時候，一次性的將這些修改執行。舉例來說，這段程式碼會觸發一次重繪和一次重排：
| 1 2 3 4 5 |
var
$body = $('body');
$body.css('padding',
'1px');
//
重排, 重繪
$body.css('color',
'red');
//
重繪
$body.css('margin',
'2px');
//
重排, 重繪
//
實際上只有一次重排和重繪被執行。
|
如上面所說，訪問一個元素的屬性會進行一次強制重排。如果我們給上面的程式碼加上一行讀取元素屬性的程式碼，這個情況就會出現：
| 1 2 3 4 5 |
var
$body = $('body');
$body.css('padding',
'1px');
$body.css('padding');
//
這裡讀取了一次元素的屬性，一次強制重排就會發生。
$body.css('color',
'red');
$body.css('margin',
'2px');
|
上面這段程式碼的結果就是，進行了兩次重排。因此，為了提高效能，你應該講讀取元素屬性的程式碼組織在一起（細節的例子可以看JSBin上的程式碼）。
有一種情況是必須觸發一次強制重排的。例如：給元素改變同一個屬性兩次（比如margin-left），一開始設定100px，沒有動畫，然後通過動畫的形式將值改為50px。具體可以看例子，當然，我在這裡會講更多的細節。
我們從一個有transition的CSS class開始：
| 1 2 3 4 5 6 |
.has-transition
{
-webkit-transition:
margin-left
1s
ease-out;
-moz-transition:
margin-
|