1、瀏覽器工作原理淺析TID Ghostzhang本PPT只是對內容的一個整理瀏覽器主要組件用戶界面瀏覽器引擎渲染引擎網絡UI 后端JS解釋器數據存儲渲染引擎Geckowebkit渲染引擎基本流程 構建dom樹 -構建render樹 -布局render樹 -繪制render樹webkit渲染引擎主流程webkit使用 render樹 這個名詞來命名由渲染對象組成的樹。元素的定位稱為 布局。利用dom節點及樣式信息去構建render樹的過程為 attachmentGecko渲染引擎主流程Gecko稱可見的格式化元素組成的樹為 frame樹，每個元素都是一個frame。元素的定位稱為 回流。Gecko

2、在html和dom樹之間附加了一層，這層稱為 內容接收器，相當制造dom元素的工廠。解析流程瀏覽器引擎解析解析一個文檔：即將其轉換為具有一定意義的結構編碼可以理解和使用的東西。解析的結果通常是表達文檔結構的節點樹，稱為解析樹或語法樹。例如，解析“231”這個表達式，可能返回這樣一棵樹。數學表達式樹節點解析解析可以分為兩個子過程 語法分析：對語言應用語法規則。 詞法分析：將輸入分解為符號，符號是語言的詞匯表基本有效單元的集合。解析器詞法分析及語法分析原文件詞法分析語法分析解析樹從源文檔到解析樹解析器 - 文法上下文無關文法 如果一個語言的文法是上下文無關的，則它可以用正則解析器來解析。對上下文無

3、關文法的一個直觀的定義是，該文法可以用BNF來完整的表達。BNF：/wiki/Context-free_grammar從源文檔到解析樹解析器類型解析器類型分為兩種： 自頂向下解析：查看語法的最高層結構并試著匹配其中一個； 自底向上解析：從輸入開始，逐步將其轉換為語法規則，從底層規則開始直到匹配高層規則。Webkit使用自底向上的解析器，Gecko使用自頂向下的解析器例子：解析“231”這個表達式詞匯表：包括整數、加號及減號。語法：該語言的語法基本單元包括表達式、term及操作符該語言可以包括多個表達式一個表達式定義為兩個term通過一個操作符連接操作

4、符可以是加號或減號1. term可以是一個整數或一個表達式例子：詞匯表及語法的定義INTEGER：01909PLUS：MINUS：詞匯表：包括整數、加號及減號。expression : term operation termoperation := PLUS | MINUSterm := INTEGER | expression語法：該語言的語法基本單元包括表達式、term及操作符該語言可以包括多個表達式一個表達式定義為兩個term通過一個操作符連接操作符可以是加號或減號1. term可以是一個整數或一個表達式例子：解析過程第一個匹配規則的子字符串是“2”，根據規則5，它是一個term第二個匹

5、配的是“23”，它符合第2條規則一個操作符連接兩個term，下一次匹配發生在輸入的結束處。“231”是一個表達式，因為我們已經知道“23”是一個term，所以我們有了一個term緊跟著一個操作符及另一個term。“2”將不會匹配任何規則，因此是一個無效輸入。HTML解析非上下文無關文法HTML 解析HTML文法定義HTML DTD DTD（Document Type Definition 文檔類型定義） 這一格式是用于定義SGML家族的語言，包括了對所有允許元素及它們的屬性和層次關系的定義。 DTD定義了HTML的解析語法HTML 解析樹DOM樹HTML解析器輸出的樹，也就是解析樹，是由DOM

6、元素及屬性節點組成的。DOM是文檔對象模型的縮寫，它是html文檔的對象表示，作為html元素的外部接口供js等調用。/DOM/DOMTR例子：DOM樹Hello DOM這里所謂的樹包含了DOM節點是說樹是由 實現了DOM接口的元素 構建而成的，瀏覽器使用已被瀏覽器內部使用的其他屬性的具體實現。解析算法hmtl不能被一般的自頂向下或自底向上的解析器所解析。 原因是： 1. 這門語言本身的寬容特性 2. 瀏覽器對一些常見的非法html有容錯機制 3. 解析過程是往復的，通常源碼不會在解析過程中發生改變，但在html中，腳本標簽包含的“document.write

7、”可能添加標簽，這說明在解析過程中實際上修改了輸入不能使用正則解析技術，瀏覽器為html定制了專屬的解析器。Html5規范中描述了這個解析算法，算法包括兩個階段符號化及構建樹。符號化符號化是詞法分析的過程，將輸入解析為符號，html的符號包括開始標簽、結束標簽、屬性名及屬性值。符號識別器識別出符號后，將其傳遞給樹構建器，并讀取下一個字符，以識別下一個符號，這樣直到處理完所有輸入。符號化：詞法分析Hello world算法輸出html符號，該算法用狀態機表示。構建樹Hello world構建樹這一階段的輸入是符號識別階段生成的符號序列。解析結束時的處理在這個階段，瀏覽器將文檔標記為可交互的，并開

8、始解析處于延時模式中的腳本這些腳本在文檔解析后執行。文檔狀態將被設置為完成，同時觸發一個load事件。Html5規范中有符號化及構建樹的完整算法(/TR/html5/syntax.html#html-parser)。瀏覽器容錯瀏覽器都具有錯誤處理的能力，但是，另人驚訝的是，這并不是html最新規范的內容，就像書簽及前進后退按鈕一樣，它只是瀏覽器長期發展的結果。解析器將符號化的輸入解析為文檔并創建文檔，但不幸的是，我們必須處理很多沒有很好格式化的html文檔，至少要小心下面幾種錯誤情況。 標簽未關閉 標簽嵌套錯誤 標簽錯誤 遺漏標簽 太深的標簽繼承，最多只允許20

9、個相同類型的標簽嵌套。CSS解析上下文無關文法CSS解析 - 詞法comment /*/*+(/*/*+)*/num 0-9+|0-9*”.”0-9+nonascii /200-/377nmstart _a-z|nonascii|escapenmchar _a-z0-9-|nonascii|escapename nmchar+ident nmstartnmchar*CSS解析 - 語法ruleset: selector , S* selector * S* declaration ; S* declaration * S*;selector: simple_selector combinato

10、r selector | S+ combinator selector ;simple_selector: element_name HASH | class | attrib | pseudo *| HASH | class | attrib | pseudo +;class: . IDENT;element_name: IDENT | *;attrib: S* IDENT S* = | INCLUDES | DASHMATCH S* IDENT | STRING S* ;pseudo: : IDENT | FUNCTION S* IDENT S* ) ;“ident”是識別器的縮寫，相當于

11、一個class名，“name”是一個元素id（用“”引用）。CSS解析器Webkit使用自底向上的解析器，Gecko使用自頂向下的解析器它們都是將每個css文件解析為樣式表對象，每個對象包含css規則，css規則對象包含選擇器和聲明對象，以及其他一些符合css語法的對象。腳本解析javascript腳本web的模式是同步的，開發者希望解析到一個script標簽時立即解析執行腳本，并阻塞文檔的解析直到腳本執行完。如果腳本是外引的，則網絡必須先請求到這個資源這個過程也是同步的，會阻塞文檔的解析直到資源被請求到。這個模式保持了很多年，并且在html4及html5中都特別指定了。開發者可以將腳本標識為

12、defer，以使其不阻塞文檔解析，并在文檔解析結束后執行。Html5增加了標記腳本為異步的選項，以使腳本的解析執行使用另一個線程。預解析Webkit和Firefox都做了這個優化，當執行腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網絡加載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預解析并不改變Dom樹，它將這個工作留給主解析過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。樣式表樣式表采用另一種不同的模式。理論上，既然樣式表不改變Dom樹，也就沒有必要停下文檔的解析等待它們，然而，存在一個問題，腳本可能在文檔的解析過程中請求樣式信息，如果樣式還沒有加

13、載和解析，腳本將得到錯誤的值，顯然這將會導致很多問題，這看起來是個邊緣情況，但確實很常見。Firefox在存在樣式表還在加載和解析時阻塞所有的腳本，而chrome只在當腳本試圖訪問某些可能被未加載的樣式表所影響的特定的樣式屬性時才阻塞這些腳本。渲染樹的構造渲染引擎渲染樹渲染樹由元素顯示序列中的可見元素組成，它是文檔的可視化表示，構建這棵樹是為了以正確的順序繪制文檔內容。Firefox將渲染樹中的元素稱為frames，webkit則用render或渲染對象來描述這些元素。一個渲染對象知道怎么布局及繪制自己及它的children。每個渲染對象用一個和該節點的css盒模型相對應的矩形區域來表示，正如

14、css2所描述的那樣，它包含諸如寬、高和位置之類的幾何信息。盒模型的類型受該節點相關的display樣式屬性的影響。元素的類型也需要考慮，例如，表單控件和表格帶有特殊的框架。渲染樹和DOM樹的關系渲染對象和DOM元素相對應，但這種對應關系不是一對一的，不可見的Dom元素不會被插入渲染樹，例如head元素。另外，display屬性為none的元素也不會在渲染樹中出現（visibility屬性為hidden的元素將出現在渲染樹中）。還有一些Dom元素對應幾個可見對象，它們一般是一些具有復雜結構的元素，無法用一個矩形來描述。例如，select元素有三個渲染對象一個顯示區域、一個下拉列表及一個按鈕。當

15、文本因為寬度不夠而折行時，新行將作為額外的渲染元素被添加。根據css規范，一個行內元素只能僅包含行內元素或僅包含塊狀元素，在存在混合內容時，將會創建匿名的塊狀渲染對象包裹住行內元素。渲染樹和DOM樹的關系一些渲染對象和所對應的Dom節點不在樹上相同的位置，例如，浮動和絕對定位的元素在文本流之外，在兩棵樹上的位置不同，渲染樹上標識出真實的結構，并用一個占位結構標識出它們原來的位置。樣式計算創建渲染樹需要計算出每個渲染對象的可視屬性，這可以通過計算每個元素的樣式屬性得到。樣式包括各種來源的樣式表，行內樣式元素及html中的可視化屬性（例如bgcolor），可視化屬性轉化為css樣式屬性。樣式表來源

16、于瀏覽器默認樣式表，及頁面作者和用戶提供的樣式表，有些樣式是瀏覽器用戶提供的（瀏覽器允許用戶定義喜歡的樣式，例如，在Firefox中，可以通過在Firefox Profile目錄下放置樣式表實現）。計算樣式的一些困難計算樣式的一些困難樣式數據是非常大的結構，保存大量的樣式屬性會帶來內存問題元素查找匹配的規則的優化應用規則涉及非常復雜的級聯例子：復雜的選擇符div div div div cont divdivdiv?Gecko - 規則樹、上下文樹Gecko - 規則樹、上下文樹Gecko用兩個樹用來簡化樣式計算規則樹和樣式上下文樹webkit也有樣式對象，但它們并沒有存儲在類似樣式上下文樹這

17、樣的樹中，只是由Dom節點指向其相關的樣式。例子：使用規則樹計算樣式上下文this is a big error this is also a very big errorerroranother error1. div margin:5px;color:black2. .err color:red3. .big margin-top:3px4. div span margin-bottom:4px5. #div1 color:blue6. #div2 color:green簡化下問題，我們只填充兩個結構color和margin，color結構只包含一個成員顏色，margin結構包含四邊。例子

18、：規則樹（指向規則）this is a big error this is also a very big errorerroranother error1. div margin:5px;color:black2. .err color:red3. .big margin-top:3px4. div span margin-bottom:4px5. #div1 color:blue6. #div2 color:green例子：上下文樹（指向規則節點）this is a big error this is also a very big errorerroranother error例子：an

19、other error1. div margin:5px;color:black2. .err color:red3. .big margin-top:3px4. div span margin-bottom:4px5. #div1 color:blue6. #div2 color:green例子：another error規則樹路徑：1、2、6計算規則，緩存結果：margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;color:#00FF00;創建節點，關聯上下文樹結構化樣式上下文按結構劃分，一個結構中的所有特性不

20、是繼承的就是非繼承的。 對繼承的特性，除非元素自身有定義，否則就從它的parent繼承。 非繼承的特性（稱為reset特性）如果沒有定義，則使用默認的值。例子：another errormargin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;color:#000000;color:#FF0000;color:#00FF00;例子：another error例子：another errormargin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;c

21、olor:#00FF00;樣式規則的來源外部樣式或標簽內style屬性的CSS規則行內樣式屬性html可視化屬性（映射為相應的樣式規則）通過映射提高匹配速度樣式規則可能很狡猾，為了解決這個問題，可以先對規則進行處理，以使其更容易被訪問。解析完樣式表之后，規則會根據選擇符添加一些hash映射，映射可以是根據id、class、標簽名或是任何不屬于這些分類的綜合映射。 如果選擇符為id，規則將被添加到id映射， 如果是class，則被添加到class映射，等等。這個處理是匹配規則更容易，不需要查看每個聲明，我們能從映射中找到一個元素的相關規則，這個優化使在進行規則匹配時減少了95的工作量。例子：映射

22、class映射id映射標簽映射1. div margin:5px;color:black2. .err color:red3. .big margin-top:3px4. div span margin-bottom:4px5. #div1 color:blue6. #div2 color:green例子：映射p.error color:red#messagediv height:50pxdiv margin:5pxan error occurred this is a message例子：映射p.error color:red#messagediv height:50pxdiv margin

23、:5pxan error occurred this is a message例子：映射p.error color:red#messageDiv height:50pxdiv margin:5pxclass映射id映射標簽映射例子：映射p.error color:redclass映射id映射標簽映射例子：映射p.error color:redclass映射標簽映射keyp.error例子：映射P.error例子：映射webkit - 共享樣式數據Webkit - 共享樣式數據webkit節點引用樣式對象（渲染樣式），某些情況下，這些對象可以被節點間共享，這些節點需要是兄弟或是表兄弟節點，并且：

24、 這些元素必須處于相同的鼠標狀態（比如不能一個處于hover，而另一個不是） 不能有元素具有id 標簽名必須匹配 class屬性必須匹配 對應的屬性必須相同 鏈接狀態必須匹配 焦點狀態必須匹配 不能有元素被屬性選擇器影響 元素不能有行內樣式屬性 不能有生效的兄弟選擇器，webcore在任何兄弟選擇器相遇時只是簡單的拋出一個全局轉換，并且在它們顯示時使整個文檔的樣式共享失效，這些包括選擇器和類似:first-child和:last-child這樣的選擇器。遍歷匹配Webkit中，并沒有規則樹，匹配的聲明會被遍歷四次 先是應用非important的高優先級屬性（之所以先應用這些屬性，是因為其他的依

25、賴于它們比如display）， 其次是高優先級important的， 接著是一般優先級非important的， 最后是一般優先級important的規則。這樣，出現多次的屬性將被按照正確的級聯順序進行處理，最后一個生效。樣式表的級聯順序一個樣式屬性的聲明可能在幾個樣式表中出現，或是在一個樣式表中出現多次，因此，應用規則的順序至關重要，這個順序就是級聯順序。根據css2的規范，級聯順序為（從低到高）： 1. 瀏覽器聲明 2. 用戶聲明 3. 作者的一般聲明 4. 作者的important聲明 5. 用戶important聲明Specifity（權值）Css2規范中定義的選擇符specifity如

26、下： 如果聲明來自style屬性，而不是一個選擇器的規則，則計1，否則計0（a） 計算選擇器中id屬性的數量（b） 計算選擇器中class及偽類的數量（c） 計算選擇器中元素名及偽元素的數量（d）連接abcd四個數量（用一個大基數的計算系統）將得到specifity。這里使用的基數由分類中最高的基數定義。規則排序規則匹配后，需要根據級聯順序對規則進行排序，webkit先將小列表用冒泡排序，再將它們合并為一個大列表。逐步處理webkit使用一個標志位標識所有頂層樣式表都已加載，如果在attch時樣式沒有完全加載，則放置占位符，并在文檔中標記，一旦樣式表完成加載就重新進行計算。布局layout/r

27、eflow布局當渲染對象被創建并添加到樹中，它們并沒有位置和大小，計算這些值的過程稱為layout或reflow。Html使用基于流的布局模型。流中靠后的元素并不會影響前面元素的幾何特性，所以布局可以在文檔中從右向左、自上而下的進行。也存在一些例外，比如html tables。坐標系統相對于根frame，使用top和left坐標。根渲染對象的位置是0,0，它的大小是viewport瀏覽器窗口的可見部分。布局是一個遞歸的過程，由根渲染對象開始，它對應html文檔元素，布局繼續遞歸的通過一些或所有的frame層級，為每個需要幾何信息的渲染對象進行計算。Dirty bit 系統為了不因為每個小變化都

28、全部重新布局，瀏覽器使用一個dirty bit系統，一個渲染對象發生了變化或是被添加了，就標記它及它的children為dirty。存在兩個標識 dirty：需要layout。 children are dirty：即使這個渲染對象可能沒問題，但它至少有一個child需要layout。全局和增量 layout當layout在整棵渲染樹觸發時，稱為全局layout，這可能在下面這些情況下發生： 1. 一個全局的樣式改變影響所有的渲染對象，比如字號的改變 2. 窗口resizelayout也可以是增量的，這樣只有標志為dirty的渲染對象會重新布局（也將導致一些額外的布局）。增量 layout會在

29、渲染對象dirty時異步觸發，例如，當網絡接收到新的內容并添加到Dom樹后，新的渲染對象會添加到渲染樹中。異步和同步layout增量layout的過程是異步的 Firefox為增量layout生成了reflow隊列，以及一個調度執行這些批處理命令。 Webkit也有一個計時器用來執行增量layout遍歷樹，為dirty狀態的渲染對象重新布局。另外，當腳本請求樣式信息時，例如“offsetHeight”，會同步的觸發增量布局。全局的layout一般都是同步觸發。有些時候，layout會被作為一個初始layout之后的回調，比如滑動條的滑動。優化當一個layout因為resize或是渲染位置改變（

30、并不是大小改變）而觸發時，渲染對象的大小將會從緩存中讀取，而不會重新計算。一般情況下，如果只有子樹發生改變，則layout并不從根開始。這種情況發生在，變化發生在元素自身并且不影響它周圍元素，例如，將文本插入文本域（否則，每次擊鍵都將觸發從根開始的重排）。layout過程layout過程parent渲染對象決定它的寬度parent渲染對象讀取chilidren，并：放置child渲染對象（設置它的x和y）在需要時（它們當前為dirty或是處于全局layout或者其他原因）調用child渲染對象的layout，這將計算child的高度parent渲染對象使用child渲染對象的累積高度，以及margin和padding的高度來設置自己的高度這將被parent渲染對象的parent使用將dirty標識設置為falseFirefox使用一個“state”對象（nsHTMLReflowState）做為參數去布局（firefox稱為reflow），state包含parent的寬度及其他內容。Firefox布局的輸出是一個“metrics”對象（nsHTMLReflowMetrics）。它包括渲染對象計算出的高度。寬度計算webkit中寬度的計算過程是（RenderBox類的calcWidth方法）： 容器的寬度是容器的可用寬度和0中的最大值，這里的可用