瀏覽器渲染頁面過程簡單介紹

呈現在我們面前的頁面需要經過瀏覽器的宣傳，下面就介紹一下瀏覽器是如何渲染頁面的。

一.佈局:

當渲染物件被建立並新增到樹中，是沒有位置和大小的，計算這些值的過程稱為layout或reflow。

佈局是一個遞迴過程，由根渲染物件開始，對應html文件元素，佈局繼續遞迴的通過一些或所有的frame層級，為每個需要幾何資訊的渲染物件進行計算。跟渲染物件位置是0，0。所有渲染物件都有一個layout或reflow方法，每個渲染物件呼叫需要佈局的children的layout方法。

瀏覽器會對發生變化的呈現器以及其子代標註為"dirty"，表示需要進行layout

標記分為兩種："dirty"和"children are dirty"。

“children are dirty”表示儘管呈現器本身沒有變化，但它至少有一個子代需要佈局。

這裡需要說明一下重排reflow和重繪repaint。

二.重排reflow:

當改變影響到文字內容、結構或元素位置時，就會發生重排。

通常有以下事件觸發:

（1）.網頁初始化時

（2）.DOM操作（元素新增、刪除、修改、元素順序變化）

（3）.內容變化，包括表單域內文字改變

（4）.CSS屬性的計算或改變

（5）.新增或刪除樣式表

（6）.更改“類”屬性

（7）.瀏覽器視窗的縮放、滾動等

（8）.偽類啟用（例如:hover懸停）

三.重繪repaint:

改變不會影響元素的位置及大小的樣式時，則會觸發重繪。換句話說，元素改變外觀時會觸發這個行為，不包括修改元素的幾何屬性。例如background,visibility。

四.非同步layout和同步layout:

非同步layout，簡單來說，就是指瀏覽器為了儘可能減少reflow和repaint的操作，而將這些操作積攢起來，再統一做一次reflow。

什麼時候會產生同步layout呢

例如resize視窗、改變頁面預設字型時，或者是指令碼作出以下請求：

layout過程:

（1）.parent渲染物件決定寬度。

（2）.parent渲染物件讀取children,設定其x,y；在需要時【標記為dirty或全域性layout等】呼叫child渲染物件的layout，計算child高度；parent使用child的累積高度，以及margin和padding的高度來設定自己的高度；最後將dirty標誌設定為false。

繪製:

和佈局一樣，繪製也可以是全域性的——繪製完整的樹——或增量的。在增量的繪製過程中，一些渲染物件以不影響整棵樹的方式改變，改變的渲染物件使其在螢幕上的矩形區域失效，這將導致作業系統將其看作dirty區域，併產生一個paint事件，作業系統很巧妙的處理這個過程，並將多個區域合併為一個。Chrome中，這個過程更復雜些，因為渲染物件在不同的程式中，而不是在主程式中。Chrome在一定程度上模擬作業系統的行為，表現為監聽事件並派發訊息給渲染根，在樹中查詢到相關的渲染物件，重繪這個物件（往往還包括它的children）。

繪製順序:

一個塊渲染物件的堆疊順序是：

（1）.背景色

（2）.背景圖

（3）.border

（4）.children

（5）.outline