現(xiàn)在我們需要填充樣式結(jié)構(gòu)。首先要填充的是 margin 結(jié)構(gòu)。由于最后的規(guī)則節(jié)點(diǎn) (F) 并沒有添加到 margin 結(jié)構(gòu)，我們需要上溯規(guī)則樹，直至找到在先前節(jié)點(diǎn)插入中計(jì)算過的緩存結(jié)構(gòu)，然后使用該結(jié)構(gòu)。我們會在指定 margin 規(guī)則的最上層節(jié)點(diǎn)（即 B 節(jié)點(diǎn)）上找到該結(jié)構(gòu)。

我們已經(jīng)有了 color 結(jié)構(gòu)的定義，因此不能使用緩存的結(jié)構(gòu)。由于 color 有一個(gè)屬性，我們無需上溯規(guī)則樹以填充其他屬性。我們將計(jì)算端值（將字符串轉(zhuǎn)化為 RGB 等）并在此節(jié)點(diǎn)上緩存經(jīng)過計(jì)算的結(jié)構(gòu)。

第二個(gè) 元素處理起來更加簡單。我們將匹配規(guī)則，最終發(fā)現(xiàn)它和之前的 span 一樣指向規(guī)則 G。由于我們找到了指向同一節(jié)點(diǎn)的同級，就可以共享整個(gè)樣式上下文了，只需指向之前 span 的上下文即可。

對于包含了繼承自父代的規(guī)則的結(jié)構(gòu)，緩存是在上下文樹中進(jìn)行的（事實(shí)上 color 屬性是繼承的，但是 Firefox 將其視為 reset 屬性，并緩存到規(guī)則樹上）
所以生成的上下文樹如下：

樣式對象具有與每個(gè)可視化屬性一一對應(yīng)的屬性（均為 CSS 屬性但更為通用）。如果某個(gè)屬性未由任何匹配規(guī)則所定義，那么部分屬性就可由父代元素樣式對象繼承。其他屬性具有默認(rèn)值。
如果定義不止一個(gè)，就會出現(xiàn)問題，需要通過層疊順序來解決。

一些例子：

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

利用上面的方法，基本可以快速確定不同選擇器的優(yōu)先級。

創(chuàng)建渲染樹后，下一步就是布局（Layout）,或者叫回流（reflow,relayout），這個(gè)過程就是通過渲染樹中渲染對象的信息，計(jì)算出每一個(gè)渲染對象的位置和尺寸，將其安置在瀏覽器窗口的正確位置，而有些時(shí)候我們會在文檔布局完成后對DOM進(jìn)行修改，這時(shí)候可能需要重新進(jìn)行布局，也可稱其為回流，本質(zhì)上還是一個(gè)布局的過程，每一個(gè)渲染對象都有一個(gè)布局或者回流方法，實(shí)現(xiàn)其布局或回流。

對渲染樹的布局可以分為全局和局部的，全局即對整個(gè)渲染樹進(jìn)行重新布局，如當(dāng)我們改變了窗口尺寸或方向或者是修改了根元素的尺寸或者字體大小等；而局部布局可以是對渲染樹的某部分或某一個(gè)渲染對象進(jìn)行重新布局。

大多數(shù)web應(yīng)用對DOM的操作都是比較頻繁，這意味著經(jīng)常需要對DOM進(jìn)行布局和回流，而如果僅僅是一些小改變，就觸發(fā)整個(gè)渲染樹的回流，這顯然是不好的，為了避免這種情況，瀏覽器使用了臟位系統(tǒng)，只有一個(gè)渲染對象改變了或者某渲染對象及其子渲染對象臟位值為”dirty”時(shí)，說明需要回流。

表示需要布局的臟位值有兩種：

“dirty”–自身改變，需要回流

“children are dirty”–子節(jié)點(diǎn)改變，需要回流

布局是一個(gè)從上到下，從外到內(nèi)進(jìn)行的遞歸過程，從根渲染對象，即對應(yīng)著HTML文檔根元素，然后下一級渲染對象，如對應(yīng)著元素，如此層層遞歸，依次計(jì)算每一個(gè)渲染對象的幾何信息（位置和尺寸）。

每一個(gè)渲染對象的布局流程基本如：

1.計(jì)算此渲染對象的寬度（width）；

2.遍歷此渲染對象的所有子級，依次：

2.1設(shè)置子級渲染對象的坐標(biāo)

2.2判斷是否需要觸發(fā)子渲染對象的布局或回流方法，計(jì)算子渲染對象的高度（height）

3.設(shè)置此渲染對象的高度：根據(jù)子渲染對象的累積高，margin和padding的高度設(shè)置其高度；

4.設(shè)置此渲染對象臟位值為false。

在繪制階段，系統(tǒng)會遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的“paint”方法，將呈現(xiàn)器的內(nèi)容顯示在屏幕上。繪制工作是使用用戶界面基礎(chǔ)組件完成的。

CSS2 規(guī)范定義了繪制流程的順序。繪制的順序其實(shí)就是元素進(jìn)入堆棧樣式上下文的順序。這些堆棧會從后往前繪制，因此這樣的順序會影響繪制。塊呈現(xiàn)器的堆棧順序如下：

背景顏色

背景圖片

邊框

子代

輪廓

這里還要說兩個(gè)概念，一個(gè)是Reflow，另一個(gè)是Repaint。這兩個(gè)不是一回事。
Repaint ——屏幕的一部分要重畫，比如某個(gè)CSS的背景色變了。但是元素的幾何尺寸沒有變。
Reflow 元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算Render Tree。是Render Tree的一部分或全部發(fā)生了變化。這就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的幾何尺寸發(fā)生了變化，需要重新布局，也就叫reflow）reflow 會從這個(gè)root frame開始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置，在reflow過程中，可能會增加一些frame，比如一個(gè)文本字符串必需被包裝起來。

Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每個(gè)結(jié)點(diǎn)都會有reflow方法，一個(gè)結(jié)點(diǎn)的reflow很有可能導(dǎo)致子結(jié)點(diǎn)，甚至父點(diǎn)以及同級結(jié)點(diǎn)的reflow。在一些高性能的電腦上也許還沒什么，但是如果reflow發(fā)生在手機(jī)上，那么這個(gè)過程是非常痛苦和耗電的。 所以，下面這些動作有很大可能會是成本比較高的。

當(dāng)你增加、刪除、修改DOM結(jié)點(diǎn)時(shí)，會導(dǎo)致Reflow或Repaint

當(dāng)你移動DOM的位置，或是搞個(gè)動畫的時(shí)候。

當(dāng)你修改CSS樣式的時(shí)候。

當(dāng)你Resize窗口的時(shí)候（移動端沒有這個(gè)問題），或是滾動的時(shí)候。

當(dāng)你修改網(wǎng)頁的默認(rèn)字體時(shí)。

注：display:none會觸發(fā)reflow，而visibility:hidden只會觸發(fā)repaint，因?yàn)闆]有發(fā)現(xiàn)位置變化。

基本上來說，reflow有如下的幾個(gè)原因：

Initial。網(wǎng)頁初始化的時(shí)候。

Incremental。一些Javascript在操作DOM Tree時(shí)。

Resize。其些元件的尺寸變了。

StyleChange。如果CSS的屬性發(fā)生變化了。

Dirty。幾個(gè)Incremental的reflow發(fā)生在同一個(gè)frame的子樹上。

看幾個(gè)例子：

$("body").css("color", "red"); // repaint
$("body").css("margin", "2px"); // reflow, repaint

var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint

bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode("dude!"));

當(dāng)然，我們的瀏覽器是聰明的，它不會像上面那樣，你每改一次樣式，它就reflow或repaint一次。一般來說，瀏覽器會把這樣的操作積攢一批，然后做一次reflow，這又叫異步reflow或增量異步reflow。但是有些情況瀏覽器是不會這么做的，比如：resize窗口，改變了頁面默認(rèn)的字體，等。對于這些操作，瀏覽器會馬上進(jìn)行reflow。

但是有些時(shí)候，我們的腳本會阻止瀏覽器這么干，比如：如果我們請求下面的一些DOM值：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
IE中的 getComputedStyle(), 或 currentStyle

因?yàn)椋绻覀兊某绦蛐枰@些值，那么瀏覽器需要返回最新的值，而這樣一樣會flush出去一些樣式的改變，從而造成頻繁的reflow/repaint。

頁面的渲染詳細(xì)過程可以通過chrome開發(fā)者工具中的timeline查看

發(fā)起請求；

解析HTML；

解析樣式；

執(zhí)行JavaScript；

布局；

繪制

瀏覽器對上文介紹的關(guān)鍵渲染路徑進(jìn)行了很多優(yōu)化，針對每一次變化產(chǎn)生盡量少的操作，還有優(yōu)化判斷重新繪制或布局的方式等等。
在改變文檔根元素的字體顏色等視覺性信息時(shí)，會觸發(fā)整個(gè)文檔的重繪，而改變某元素的字體顏色則只觸發(fā)特定元素的重繪；改變元素的位置信息會同時(shí)觸發(fā)此元素（可能還包括其兄弟元素或子級元素）的布局和重繪。某些重大改變，如更改文檔根元素的字體尺寸，則會觸發(fā)整個(gè)文檔的重新布局和重繪，據(jù)此及上文所述，推薦以下優(yōu)化和實(shí)踐：

HTML文檔結(jié)構(gòu)層次盡量少，最好不深于六層；

腳本盡量后放，放在前即可；

少量首屏樣式內(nèi)聯(lián)放在標(biāo)簽內(nèi)；

樣式結(jié)構(gòu)層次盡量簡單；

在腳本中盡量減少DOM操作，盡量緩存訪問DOM的樣式信息，避免過度觸發(fā)回流；

減少通過JavaScript代碼修改元素樣式，盡量使用修改class名方式操作樣式或動畫；

動畫盡量使用在絕對定位或固定定位的元素上；

隱藏在屏幕外，或在頁面滾動時(shí)，盡量停止動畫；

盡量緩存DOM查找，查找器盡量簡潔；

涉及多域名的網(wǎng)站，可以開啟域名預(yù)解析

瀏覽器渲染是個(gè)很繁瑣的過程，其中每一步都有對應(yīng)的算法。
了解渲染過程原理可以有針對的性能優(yōu)化，而且也可以懂得一些基本的要求和規(guī)范的原理。
最后文章中間很多語句都是直接復(fù)制的原文，自己的語言概況還是不及原文精彩。

《How Browser Work》

瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘

瀏覽器渲染原理

淺析前端頁面渲染機(jī)制

瀏覽器 渲染,繪制流程及性能優(yōu)化

優(yōu)化CSS重排重繪與瀏覽器性能