摘要：瀏覽器會(huì)對發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為，表示需要進(jìn)行標(biāo)記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統(tǒng)一做一次。

終于到了布局的部分了！

當(dāng)渲染對象被創(chuàng)建并添加到樹中，是沒有位置和大小的，計(jì)算這些值的過程稱為layout或reflow。
布局是一個(gè)遞歸過程，由根渲染對象開始，對應(yīng)html文檔元素，布局繼續(xù)遞歸的通過一些或所有的frame層級，為每個(gè)需要幾何信息的渲染對象進(jìn)行計(jì)算。跟渲染對象位置是0，0。所有渲染對象都有一個(gè)layout或reflow方法，每個(gè)渲染對象調(diào)用需要布局的children的layout方法。
瀏覽器會(huì)對發(fā)生變化的呈現(xiàn)器以及其子代標(biāo)注為"dirty"，表示需要進(jìn)行l(wèi)ayout
標(biāo)記分為兩種："dirty"和"children are dirty"。
“children are dirty”表示盡管呈現(xiàn)器本身沒有變化，但它至少有一個(gè)子代需要布局。
這里需要說明一下重排reflow和重繪repaint。

當(dāng)改變影響到文本內(nèi)容、結(jié)構(gòu)或元素位置時(shí)，就會(huì)發(fā)生重排。
通常有以下事件觸發(fā)：

網(wǎng)頁初始化時(shí)

DOM操作（元素添加、刪除、修改、元素順序變化）

內(nèi)容變化，包括表單域內(nèi)文本改變

CSS屬性的計(jì)算或改變

添加或刪除樣式表

更改“類”屬性

瀏覽器窗口的縮放、滾動(dòng)等

偽類激活（例如:hover懸停）

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

異步layout，簡單來說，就是指瀏覽器為了盡可能減少reflow和repaint的操作，而將這些操作積攢起來，再統(tǒng)一做一次reflow。
什么時(shí)候會(huì)產(chǎn)生同步layout呢？
例如resize窗口、改變頁面默認(rèn)字體時(shí)，或者是腳本作出以下請求：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

IE中的 getComputedStyle(), 或 currentStyle
那么瀏覽器需要立即layout以返回最新的值。

parent渲染對象決定寬度

parent渲染對象讀取children,設(shè)置其x,y；在需要時(shí)【標(biāo)記為dirty或全局layout等】調(diào)用child渲染對象的layout，計(jì)算child高度；parent使用child的累積高度，以及margin和padding的高度來設(shè)置自己的高度；最后將dirty標(biāo)志設(shè)置為false

和布局一樣，繪制也可以是全局的——繪制完整的樹——或增量的。在增量的繪制過程中，一些渲染對象以不影響整棵樹的方式改變，改變的渲染對象使其在屏幕上的矩形區(qū)域失效，這將導(dǎo)致操作系統(tǒng)將其看作dirty區(qū)域，并產(chǎn)生一個(gè)paint事件，操作系統(tǒng)很巧妙的處理這個(gè)過程，并將多個(gè)區(qū)域合并為一個(gè)。Chrome中，這個(gè)過程更復(fù)雜些，因?yàn)殇秩緦ο笤诓煌倪M(jìn)程中，而不是在主進(jìn)程中。Chrome在一定程度上模擬操作系統(tǒng)的行為，表現(xiàn)為監(jiān)聽事件并派發(fā)消息給渲染根，在樹中查找到相關(guān)的渲染對象，重繪這個(gè)對象（往往還包括它的children）。

一個(gè)塊渲染對象的堆棧順序是：

背景色

背景圖

border

children

outline

【待更新】
參考文獻(xiàn)：

瀏覽器內(nèi)部工作原理

瀏覽器的渲染原理簡介

How browsers work

有關(guān)網(wǎng)頁渲染，每個(gè)前端開發(fā)者都該知道的那點(diǎn)事

前端文摘：深入解析瀏覽器的幕后工作原理

MDN:Style System Overview