摘要：書(shū)接上文瀏覽器內(nèi)核之解釋器和模型本文剖析的解釋器和樣式布局。根據(jù)生成解釋器類(lèi)。而后將解釋后的信息設(shè)置到元素的屬性的樣式中，然后設(shè)置標(biāo)記表明該元素需要重新計(jì)算樣式，并觸發(fā)重新計(jì)算布局。

微信公眾號(hào)：愛(ài)寫(xiě)bugger的阿拉斯加
如有問(wèn)題或建議，請(qǐng)后臺(tái)留言，我會(huì)盡力解決你的問(wèn)題。

此文章是我最近在看的【W(wǎng)ebKit 技術(shù)內(nèi)幕】一書(shū)的一些理解和做的筆記。
而【W(wǎng)ebKit 技術(shù)內(nèi)幕】是基于 WebKit 的 Chromium 項(xiàng)目的講解。

書(shū)接上文 瀏覽器內(nèi)核之 HTML 解釋器和 DOM 模型

本文剖析 WebKit 的 CSS 解釋器和樣式布局。

從整個(gè)網(wǎng)頁(yè)的加載和渲染過(guò)程來(lái)看，CSS 解釋器和規(guī)則匹配處于 DOM 樹(shù)建立之后，RenderObject 樹(shù)建立之前，CSS 解釋器解釋后的結(jié)果會(huì)保存起來(lái)，然后 RenderObject 樹(shù)基于該結(jié)果來(lái)進(jìn)行規(guī)范匹配和布局計(jì)算。當(dāng)網(wǎng)頁(yè)有用戶(hù)交互或者動(dòng)畫(huà)等動(dòng)作的時(shí)候，通過(guò) CSSDOM 等技術(shù)，JavaScript 代碼同樣可以非常方便地修改 CSS 代碼，WebKit 此時(shí)需要重新解釋樣式并重復(fù)以上這一過(guò)程。

CSS 的全稱(chēng)是 Cascading Style Sheet，中文名是級(jí)聯(lián)樣式表，主要用來(lái)控制網(wǎng)頁(yè)的顯示風(fēng)格。

圖 6-1 描述了一個(gè)典型的 CSS 規(guī)則結(jié)構(gòu)。一個(gè)規(guī)則包括兩個(gè)部分——規(guī)則關(guān)和規(guī)則體。規(guī)則頭由一個(gè)或者多個(gè)選擇器組成；規(guī)則體則由一個(gè)或者多個(gè)樣式聲明組成，每個(gè)樣式聲明由樣式名和樣式值構(gòu)成，表示這個(gè)規(guī)則對(duì)哪些樣式進(jìn)行了規(guī)定和設(shè)置。

當(dāng) HTML 中的某個(gè)元素經(jīng)過(guò)后面的匹配算法使用了這條規(guī)則，那么將這些樣式設(shè)置成該元素的樣式，除非有更高優(yōu)先級(jí)的規(guī)則匹配上該元素。

CSS 的選擇器是一級(jí)模式，用來(lái)匹配相應(yīng)的 HTML 元素。當(dāng)選擇器匹配相應(yīng)元素的時(shí)候，該選擇器包含的各種樣式值就會(huì)作用于匹配的元素上。通過(guò)選擇器，CSS 能夠精準(zhǔn)地控制 HTML 頁(yè)面中的任意一個(gè)或者多個(gè)元素的樣式屬性。

具體的，這里不做介紹，請(qǐng)查閱 CSS 規(guī)范。

框模型（Box model，或稱(chēng)箱子模型）就是我們常說(shuō)的盒子模型，是CSS 標(biāo)準(zhǔn)中引入來(lái)表示 HTML 標(biāo)簽元素的布局結(jié)構(gòu)。一個(gè)框模型大致包括四個(gè)部分：外邊距（Margin）、邊框（Border）、內(nèi)邊距（Padding）和內(nèi)容（Content）。

當(dāng) WebKit 計(jì)算元素的箱子的位置和大小時(shí)，WebKit 需要計(jì)算該元素和另外一個(gè)矩形區(qū)域的相對(duì)位置，這個(gè)矩形區(qū)域稱(chēng)為該元素的包含塊。上面介紹的框模型就是在包含塊內(nèi)計(jì)算和確定各個(gè)元素的，包含塊的具體定義如下：

根元素的包含塊稱(chēng)為初始包含塊，通常它的大小就是可視區(qū)域（Viewport）的大小。

對(duì)于其他位置屬性設(shè)置為 “static” 或者 “relative” 的元素，它的包含塊就是最近祖先的箱子模型中的內(nèi)容區(qū)域（Content）。

如果元素的位置屬性為 “fixed” ，那么該元素的包含快脫離 HTML 文檔，因定在可視區(qū)域的某個(gè)特定位置。

如果元素的位置屬性為 “absolute” ,那么該元素的包含塊由最近的含有屬性 “absolute”、“relative”、或者 “fixed” 的祖先決定，具體規(guī)則如下：如果一個(gè)元素具有 “inline” 屬性，那么元素的包含塊是該祖先的第一個(gè)和最近一個(gè) inline 框的內(nèi)邊距的區(qū)域；否則，包含塊則是該祖先的內(nèi)邊距所包圍的區(qū)域。

CSS 標(biāo)準(zhǔn)中定義了各式各樣的樣式屬性，用來(lái)描述元素的顯示效果。
這些屬性大致分成以下類(lèi)型：

背景：如背景顏色和背景圖片等。

文本：設(shè)置文本縮進(jìn)，對(duì)齊。單詞間隔。字母間隔。字符轉(zhuǎn)換、裝飾和空白字符等。

字體：設(shè)置字體屬性，可以是內(nèi)嵌的，也可以是自定義字體的方式，另外還可以設(shè)置加粗、變形等屬性。

列表：設(shè)置列表類(lèi)型，可以以字母、希臘字母、數(shù)字等方式編號(hào)列表。

表格：通過(guò)設(shè)置邊框來(lái)達(dá)到顯示表格的視覺(jué)效果的目的。設(shè)置是否把表格邊框合并為單一的邊框，設(shè)置分隔單元格邊框的距離，設(shè)置表格標(biāo)題的位置，設(shè)置是否顯示表格中的空單元格，設(shè)置顯示單元、行和列的算法等。

定位：CSS 提供元素的相對(duì)、絕對(duì)定位和浮動(dòng)定位。

CSSOM 稱(chēng)為 CSS 對(duì)象模型。它思想是在 DOM 中的一些節(jié)點(diǎn)接口中，加入獲取和操作 CSS 屬性或者接口的 JavaScript 接口，因而 JavaScript 可以動(dòng)態(tài)操作 CSS 樣式。DOM 提供了接口讓 JavaScript 修改 HTML 文檔，同理，CSSOM 提供了接口讓 JavaScript 獲得和修改 CSS 代碼設(shè)置的樣式信息。

對(duì)于內(nèi)部和外部樣式表，CSSOM 定義了樣式表的接口，稱(chēng)為 “CSSStyleSheet”, 這是一個(gè)可以在 JavaScript 代碼中訪(fǎng)問(wèn)的接口。借助這個(gè)接口，開(kāi)發(fā)者可以在 JavaScript 中獲取樣式表的各種信息，例如 CSS 的 “href”、樣式表類(lèi)型 “type”、規(guī)則信息 “cssRules” 等，甚至可以獲取樣式表中的 CSS 規(guī)則列表。這個(gè)接口同 DOM 中的 “Script” 節(jié)點(diǎn)或者 “Link” 節(jié)點(diǎn)不一樣，它是 CSSOM 定義的新接口。開(kāi)發(fā)者可以通過(guò) document.styleSheets 查看當(dāng)前網(wǎng)頁(yè)中包含的所有 CSS 樣式表，這是因?yàn)?CSSOM 對(duì) DOM 中的 Document 接口進(jìn)行了擴(kuò)展，下面是新加入的屬性：

W3C 還定義了另外一個(gè)規(guī)范是 CSSDOM View，它的基本含義是增加一些新的屬性到 Window、Document、Element、HTMLElement 和 MouseEvent 等接口，這些 CSS 的屬性能夠讓 JavaScript 獲取視圖信息，用于表示跟視圖相關(guān)的特征，例如窗口大小，網(wǎng)頁(yè)滾動(dòng)位移，元素的框位置、鼠標(biāo)事件的坐標(biāo)等信息。下面是以 CSSDOM View 對(duì) Window 的擴(kuò)展：

對(duì)于 CSS 樣式表，不管是內(nèi)嵌還是外部文檔，WebKit 都使用 CSSStyleSheet 類(lèi)來(lái)表示。圖 6-5 描述了 WebKit 內(nèi)部是如何表示 CSS 文檔的。

一切的起源都是從 DOM 的 Document 類(lèi)開(kāi)始。

DoucmentStyleSheetCollection 類(lèi)，該類(lèi)包含了所在 CSS 樣式表

WebKit的內(nèi)部表示類(lèi) CSSStyleSheet，它包含 CSS 的 href 、類(lèi)型、內(nèi)容等信息。

CSS 的內(nèi)容就是樣式信息 StyleSheetContent，包含了一個(gè)樣式規(guī)則 （StyleRuleBase）列表。樣式規(guī)則被 用在 CSS 的解釋器的工作過(guò)程中。

下面部分 WebKit 主要是將解釋之后的規(guī)則組織起來(lái)，用于為 DOM 中的元素匹配相應(yīng)的規(guī)則，從而應(yīng)用規(guī)則中的屬性值序列。這一過(guò)程的主要負(fù)責(zé)者是 StyleSheetResolver 類(lèi)，它屬于 Document 類(lèi)，并包含了一個(gè) DocumentRuleSets 類(lèi)用來(lái)表示多個(gè)規(guī)則集合（RuleSet）。每個(gè)規(guī)則集合就是將之前解釋之后的結(jié)果合并起來(lái)，并進(jìn)行分類(lèi)，例如 id 類(lèi)規(guī)則，標(biāo)簽類(lèi)規(guī)則等。至于為什么是多個(gè)規(guī)則集合，是因?yàn)檫@些規(guī)則集合可能源自于默認(rèn)的規(guī)則集合，或者網(wǎng)頁(yè)自定義的規(guī)則集合等。

CSS 解釋過(guò)程是指從 CSS 字符串經(jīng)過(guò) CSS 解釋器處理后變成渲染引擎內(nèi)部規(guī)則的表示過(guò)程。

在 WebKit 中，過(guò)程如 6-8 所示。

這一過(guò)程是基本思想是由 CSSParser 類(lèi)負(fù)責(zé)。CSSParser 類(lèi)其實(shí)也是橋接類(lèi)，實(shí)際的解釋工作是由 CSSGrammer.y.in 來(lái)完成。CSSGrammer.y.in 是Bison 的輸入文件，Bioson 是一個(gè)生成解釋器的工具。Bison 根據(jù) CSSGrammer.y.in 生成 CSS 解釋器——CSSGrammer 類(lèi)。當(dāng)然 CSSGrammer 類(lèi)需要調(diào)用 CSSParser類(lèi)來(lái)處理解釋結(jié)果，例如需要使用 CSSParser 類(lèi)創(chuàng)建選擇器對(duì)象、屬性、規(guī)則等。

在解釋網(wǎng)頁(yè)中自定義的 CSS 樣式之前，實(shí)際上 WebKit 渲染引擎會(huì)為每個(gè)網(wǎng)頁(yè)設(shè)置一個(gè)默認(rèn)的樣式，這決定了網(wǎng)頁(yè)所沒(méi)有設(shè)置的元素屬性及其屬性默認(rèn)值和將要顯示的效果。一般來(lái)講，不同的 WebKit 移植可以設(shè)置不同的默認(rèn)樣式。下面是 Chrome 瀏覽器使用的默認(rèn)樣式，這些樣式?jīng)Q定了默認(rèn)的網(wǎng)頁(yè)顯示效果。

樣式規(guī)則建立完成之后，WebKit 保存規(guī)則結(jié)果在 DocumentRuleSets 對(duì)象類(lèi)中。當(dāng) DOM 的節(jié)點(diǎn)建立之后，WebKit 會(huì)為其中的一些節(jié)點(diǎn)（只限于可視節(jié)點(diǎn)）選擇合適的樣式信息。這些工作都是由 StyleResolver 來(lái)負(fù)責(zé)。當(dāng)然，實(shí)際的匹配工作還是在 DocumentRuleSets 類(lèi)中完成的。

圖 6-9 描述了參與樣式規(guī)則匹配的 WebKit 主要相關(guān)類(lèi)?；舅悸肥鞘褂?StyleResolver 類(lèi)來(lái)為 DOM 的元素節(jié)點(diǎn)匹配樣式。StyleResolver 類(lèi)根據(jù)元素的信息，例如標(biāo)簽名、類(lèi)別等，從樣式規(guī)則中查找最匹配的規(guī)則，然后將樣式信息保存到新建的 RenderStyle 對(duì)象中。最后，最后這些 RenderStyle 對(duì)象被 RenderObject 類(lèi)所管理和使用。

規(guī)則的匹配則是由 ElementRuleCollector 類(lèi)來(lái)計(jì)算并獲得，它根據(jù)元素的屬性等，并從 DocumentRuleSets 類(lèi)中獲取規(guī)則集合，依次按照 ID、類(lèi)別、標(biāo)簽等選擇器信息逐次匹配獲得元素的樣式。

首先，當(dāng) WebKit 需要為 HTML 元素創(chuàng)建 RenderObject 類(lèi)的時(shí)候，首先 StyleResolver 類(lèi)負(fù)責(zé)獲取樣式信息，并返回 RenderStyle 對(duì)象，RenderStyle 對(duì)象包含了匹配完的結(jié)果樣式結(jié)果。

其次，根據(jù)實(shí)際需求，每個(gè)元素可能需要匹配不同來(lái)源的規(guī)則，依次是用戶(hù)代理（瀏覽器）規(guī)則集合、用戶(hù)規(guī)則集合和 HTML 網(wǎng)頁(yè)中包含的自定義規(guī)則集合。這三個(gè)規(guī)則的匹配方式是類(lèi)似的。這里是以自定義規(guī)則匹配為例加以說(shuō)明的。

再次，對(duì)于自定義規(guī)則集合，它先查找 ID 規(guī)則，檢查有無(wú)匹配的規(guī)則，之后依次檢查類(lèi)型規(guī)則，標(biāo)簽規(guī)則等，如果某個(gè)規(guī)則匹配上該元素，WebKit 把這些規(guī)則保存到匹配結(jié)果中。

最后，WebKit 對(duì)這些規(guī)則進(jìn)行排序。對(duì)于該元素需要的樣式屬性，WebKit 選擇從高優(yōu)先級(jí)規(guī)則中選取，并將樣式屬性值返回。

CSSDOM 定義了 JavaScript 訪(fǎng)問(wèn)樣式的能力和方式。使用 CSSDOM 接口來(lái)更改屬性值的過(guò)程，在 WebKit 中，這需要 JavaScript 引擎和渲染引擎協(xié)同完成。

大致的過(guò)程是，JavaScript 引擎調(diào)用設(shè)置屬性值的公共處理函數(shù)，然后該函數(shù)調(diào)用屬性值解析函數(shù)，在這個(gè)例子中則是 CSS 的 JavaScript 綁定函數(shù)。而后 WebKit 將解釋后的信息設(shè)置到元素的 “style” 屬性的樣式 “webkitTransform” 中，然后設(shè)置標(biāo)記表明該元素需要重新計(jì)算樣式，并觸發(fā)重新計(jì)算布局。最后是 WebKit 的重新繪圖，圖 6-12 描述了其中的主要過(guò)程。

當(dāng) WebKit 創(chuàng)建 RenderObject 對(duì)象之后，每個(gè)對(duì)象是不知道自己的位置、大小等信息的，WebKit 根據(jù)框模型來(lái)計(jì)算它們的位置，大小等信息的過(guò)程稱(chēng)為布局計(jì)算。

第五章描述過(guò) Frame 類(lèi)，用于表示網(wǎng)頁(yè)的框結(jié)構(gòu)，每個(gè)框都有一個(gè) FrameView 類(lèi)，用于表示框的視圖結(jié)構(gòu)。

FrameView 類(lèi)主要負(fù)責(zé)視圖方面的任務(wù)，例如網(wǎng)頁(yè)視圖大小，滾動(dòng)、布局計(jì)算、繪圖等，它是一個(gè)總?cè)肟陬?lèi)。 “l(fā)ayout” 和 “needsLayout” ，它們用來(lái)布局計(jì)算和決定是否需要布局計(jì)算，實(shí)際的布局計(jì)算則是在 RenderObject 類(lèi)中。

布局計(jì)算根據(jù)其計(jì)算的范圍大致可以分為兩類(lèi)：第一類(lèi)是對(duì)整個(gè) RenderObject 樹(shù)進(jìn)行的計(jì)算；第二類(lèi)是對(duì) RenderObject 樹(shù)中某個(gè)子樹(shù)的計(jì)算，常見(jiàn)于文本元素或者是 overflow:auto 塊的計(jì)算，這種情況一般是其子樹(shù)布局的改變不會(huì)影響其周?chē)氐牟季?，因而不需要重新?jì)算更大范圍內(nèi)的布局。

布局計(jì)算是一個(gè)遞歸的過(guò)程，因?yàn)橐粋€(gè)節(jié)點(diǎn)的大小通常需要先計(jì)算它的子女節(jié)點(diǎn)的位置，大小等信息。

圖 6-14 描述了 RenderObject 節(jié)點(diǎn)計(jì)算布局的主要過(guò)程，中間省略了很多判斷和步驟，主要邏輯都是由 RenderObject 類(lèi)的 “l(fā)ayout” 函數(shù)來(lái)完成。

首先，該函數(shù)會(huì)判斷 RenderObject 節(jié)點(diǎn)是否需要重新計(jì)算，通常這需要通過(guò)檢查位數(shù)組中的相應(yīng)標(biāo)記位、子女是否需要計(jì)算布局等來(lái)確定。

其次，該函數(shù)會(huì)確定網(wǎng)頁(yè)的寬度和垂直方向上的外邊距，這是因?yàn)榫W(wǎng)頁(yè)通常是垂直方向上滾動(dòng)，而水平方向盡量不需要滾動(dòng)。

再次，該函數(shù)會(huì)遍歷其每一個(gè)子女節(jié)點(diǎn)，依次計(jì)算它們的布局。每一個(gè)元素會(huì)實(shí)現(xiàn)自己的 “l(fā)ayout” 函數(shù)，根據(jù)特定的算法來(lái)計(jì)算該類(lèi)型元素的布局。如果頁(yè)面元素定義了自身的寬高，那么 WebKit 按照定義的寬高來(lái)確定元素的大小，而對(duì)于像文本節(jié)點(diǎn)這樣的內(nèi)聯(lián)元素則需要結(jié)合其字號(hào)大小及文字的多少等來(lái)確定其對(duì)應(yīng)的寬高。如果頁(yè)面元素所確定的寬高超過(guò)了布局容器包含塊所能提供的寬高，同時(shí)其 overflow 的屬性為 visible 或 auto , WebKit 則會(huì)提供滾動(dòng)條來(lái)保證可以顯示其所有內(nèi)容。除非網(wǎng)頁(yè)定義了頁(yè)面元素的寬高，一般來(lái)說(shuō)頁(yè)面元素的寬高是在布局的時(shí)候通過(guò)相關(guān)計(jì)算得出來(lái)的。如果元素它有子女，則 WebKit 需要遞歸這一過(guò)程。

最后，節(jié)點(diǎn)根據(jù)它的子女們的大小計(jì)算得出自己的高度，整個(gè)過(guò)程結(jié)束。

重新布局的情況：

首先，當(dāng)網(wǎng)頁(yè)首次被打開(kāi)的時(shí)候，瀏覽器設(shè)置網(wǎng)頁(yè)的可視區(qū)域（viewport），并調(diào)用計(jì)算布局的方法。這其實(shí)也描述了一種常見(jiàn)的情景，就是當(dāng)可視區(qū)域發(fā)生變化的時(shí)候，WebKit 都需要重新計(jì)算布局，這是因?yàn)榫W(wǎng)頁(yè)的包含塊的大小發(fā)生了改變。

其次，網(wǎng)頁(yè)的動(dòng)畫(huà)會(huì)觸發(fā)布局計(jì)算。當(dāng)網(wǎng)頁(yè)顯示結(jié)束后，動(dòng)畫(huà)可能改變樣式屬性，那么 WebKit 就需要重新計(jì)算。

然后，JavaScript 代碼通過(guò) CSSDOM 等直接修改樣式信息，它們也會(huì)觸發(fā) WebKit 重新計(jì)算布局。

最后，用戶(hù)的交互也會(huì)觸發(fā)布局計(jì)算，例如翻滾網(wǎng)頁(yè)，這會(huì)角觸發(fā)新區(qū)域布局計(jì)算。

CSS 的布局計(jì)算是以包含塊和框模型為基礎(chǔ)的，這表示這些元素的布局計(jì)算都依賴(lài)于塊，例如 “div” 通常就是一個(gè)塊，如前面所述它們通常是在垂直方向上展開(kāi)。

但是，CSS 標(biāo)準(zhǔn)也規(guī)定了行布局形式，這就是內(nèi)聯(lián)元素。內(nèi)聯(lián)元素表現(xiàn)的是行布局形式，就是說(shuō)這些元素以行進(jìn)行顯示。

以 “div” 元素為例，如果設(shè)置屬性 “style” 為 “displa: inline” 時(shí)，則該元素是內(nèi)聯(lián)元素，那么它可能與前面的元素在同一行。如果該元素沒(méi)有設(shè)置這個(gè)屬性時(shí)，則是塊元素，那么在新的行里顯示。這顯然會(huì)增加處理的復(fù)雜性，為此，WebKit 的處理方式是 ——對(duì)于一個(gè)塊元素對(duì)應(yīng)的 RenderObject 對(duì)象，它的子女要么都是塊元素的 RenderObject 對(duì)象，要么都是非內(nèi)聯(lián)元素對(duì)應(yīng)的 RenderObject 對(duì)象，這可以通過(guò)建立匿名塊（Anonymous Block）對(duì)象來(lái)實(shí)現(xiàn)。

布局計(jì)算相對(duì)也是比較耗時(shí)間的，更糟糕的是，一旦布局發(fā)生變化，WebKit 就需要后面的重新繪制操作。另一方面，減少樣式的變動(dòng)而依賴(lài)現(xiàn)在 HTML5 的新功能可以有效地提高網(wǎng)頁(yè)的渲染效率。

匹配算法結(jié)合 CSS 規(guī)則來(lái)設(shè)置樣式

選擇器就是選中某個(gè)元素的

框模型就是常說(shuō)的盒子模型，包含 margin、border、padding、content

CSSOM 稱(chēng)為 CSS 對(duì)象模型，JavaScript 可以獲取和操作 CSS 屬性。

CSS 解釋過(guò)程是指從 CSS 字符串經(jīng)過(guò) CSS 解釋器處理后變成渲染引擎內(nèi)部規(guī)則的表示過(guò)程。

當(dāng) WebKit 創(chuàng)建 RenderObject 對(duì)象之后，每個(gè)對(duì)象是不知道自己的位置、大小等信息的，WebKit 根據(jù)框模型（Frame 類(lèi)的 FrameView）來(lái)計(jì)算它們的位置，大小等信息的過(guò)程稱(chēng)為布局計(jì)算

布局計(jì)算是一個(gè)遞歸的過(guò)程，而且還會(huì)發(fā)生重新布局。

希望本文對(duì)你有點(diǎn)幫助。

下期分享 第七章 渲染基礎(chǔ) 敬請(qǐng)期待。

對(duì) 全棧開(kāi)發(fā) 有興趣的朋友可以?huà)呦路蕉S碼關(guān)注我的公眾號(hào) —— 愛(ài)寫(xiě)bugger的阿拉斯加

分享 web 開(kāi)發(fā)相關(guān)的技術(shù)文章，熱點(diǎn)資源，全棧程序員的成長(zhǎng)之路。