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

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

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

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

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

一些例子：

 *             {}  /* 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)先級(jí)。

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

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

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

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

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

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

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

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

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

2.遍歷此渲染對(duì)象的所有子級(jí)，依次：

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

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

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

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

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

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

背景顏色

背景圖片

邊框

子代

輪廓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看幾個(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)然，我們的瀏覽器是聰明的，它不會(huì)像上面那樣，你每改一次樣式，它就reflow或repaint一次。一般來(lái)說(shuō)，瀏覽器會(huì)把這樣的操作積攢一批，然后做一次reflow，這又叫異步reflow或增量異步reflow。但是有些情況瀏覽器是不會(huì)這么做的，比如：resize窗口，改變了頁(yè)面默認(rèn)的字體，等。對(duì)于這些操作，瀏覽器會(huì)馬上進(jìn)行reflow。

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

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

因?yàn)?，如果我們的程序需要這些值，那么瀏覽器需要返回最新的值，而這樣一樣會(huì)flush出去一些樣式的改變，從而造成頻繁的reflow/repaint。

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

發(fā)起請(qǐng)求；

解析HTML；

解析樣式；

執(zhí)行JavaScript；

布局；

繪制

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

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

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

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

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

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

減少通過(guò)JavaScript代碼修改元素樣式，盡量使用修改class名方式操作樣式或動(dòng)畫(huà)；

動(dòng)畫(huà)盡量使用在絕對(duì)定位或固定定位的元素上；

隱藏在屏幕外，或在頁(yè)面滾動(dòng)時(shí)，盡量停止動(dòng)畫(huà)；

盡量緩存DOM查找，查找器盡量簡(jiǎn)潔；

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

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

《How Browser Work》

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

瀏覽器渲染原理

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

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

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