現代瀏覽器的工做原理【一】

序言

做爲一個Web開發者，學習的瀏覽器操做的內部能夠幫助您作出更好的決策，以及開發實踐的最佳作法。 雖然這是一個至關漫長的文件，咱們建議你花一些時間來挖掘研究， 咱們保證你會很高興你這樣作的話。

簡介

Web瀏覽器多是最普遍使用的軟件，在本文中，我將解釋它們是如何在幕後工做的。當你在地址欄裏敲入的goole.com，直到你在瀏覽器屏幕上看到谷歌網頁，咱們將看看這一過程當中會發生什麼。

目錄

1. 簡介

1. 咱們所談論的瀏覽器

2. 瀏覽器的主要功能

3. 瀏覽器的高層次結構
   

2. 渲染引擎

1. 渲染引擎

2. 主要流程
   

3. 主要流程實例
   

3. 解析和DOM樹建設

1. 腳本

2. 投機性解析
   

3. 樣式表

4. WebKit的CSS解析器

5. HTML語法定義

6. 並不是一個上下文無關文法
   

7. HTML DTD

8. DOM

9. 解析算法
   

10. 標記化算法
    

11. 樹構建算法
    

12. 解析完成時的動做

13. 瀏覽器容許偏差
    

14. 文法

15. 詞法分析器 - 組合
    

16. 翻譯

17. 解析示例
    

18. 詞彙和語法的正式定義
    

19. 解析器的類型
    

20. 自動生成解析器

21. 通常解析

22. HTML解析器

23. CSS 解析

24. 腳本和樣式表的處理順序

4. 渲染樹建設

1. 共享樣式數據

2. 火狐規則樹
   

3. 一個簡單的匹配操做規則

4. 運用正確的級聯秩序規則
   

5. 結構拆分

6. 使用規則樹計算樣式內容
   

7. 樣式表的級聯順序

8. 特異性
   

9. 排序規則

10. 渲染樹與DOM樹的關係

11. 構建樹的流程

12. 樣式的計算
    

13. 漸進的過程

5. 佈局

1. 髒位系統

2. 全局和增量佈局
   

3. 異步和同步佈局
   

4. 優化

5. 佈局過程

6. 寬度計算

7. 斷行

6. 繪製

1. 全局和增量

2. 繪製順序

3. 火狐顯示列表

4. Webkit的矩形存儲
   

7. 動態改變

8. 渲染引擎的線程
   

1. 事件循環

9. CSS2的視覺模型

1. 相對

2. 漂浮

3. 絕對和固定

4. 畫布

5. CSS盒模型
   

6. 定位方案

7. 盒類型

8. 定位

9. 分層的表明性
   

10. 參考資料

1.1 咱們所談論的瀏覽器

當今有五款主流的瀏覽器，分別是： Internet Explorer, Firefox, Safari, Chrome和Opera。將會給出開源瀏覽器的例子：Firefox, Chrome and Safari (部分開源)。根據2011年8月份的統計圖表，Firefox, Safari和Chrome的整體使用份額佔了將近60%，所以，時下的開源瀏覽器佔瀏覽器業務的很大一部分比例。

1.2 瀏覽器的主要功能

瀏覽器的主要功能是：經過從服務器請求，並顯示在瀏覽器窗口，以提供您選擇的Web資源。資源一般是一個HTML文檔，也多是一個PDF文檔、圖片或者其它類型。資源的位置是由用戶使用URI（統一資源標識符）指定的。

瀏覽器解釋並顯示HTML文件的方法是在HTML和CSS規範中指定的。這些規範是由W3C（萬維網聯盟）組織，它是爲制定Web標準組織的機構。 多年來的瀏覽器只是符合一個規範的一部分，並開發本身的擴展。這對網頁的做者形成嚴重的兼容性問題。現在，大多數的瀏覽器或多或少符合規格。

瀏覽器的用戶界面有不少共同之處。其中普通的用戶界面元素是：

• 插入URI的地址欄

• 後退和前進按鈕

• 書籤選項
  

• 刷新和中止按鈕，用於刷新和中止加載當前文檔
  

• 主頁按鈕，可讓你到你的主頁
  

奇怪的是，瀏覽器的用戶界面中沒有指定任何正式的規範，它只是來自形過多年的經驗，並經過瀏覽器模仿對方的良好作法。HTML5規範不定義的 UI元素的瀏覽器必須有，但列出了一些常見的元素，其中有地址欄，狀態欄和工具欄。固然，具備獨特的一個特定的瀏覽器，像Firefox的下載管理器。

1.3 瀏覽器的高層次結構

瀏覽器的主要組成以下：

一、用戶界面----這包括地址欄，後退/前進按鈕，書籤菜單等，除主窗口外，在此能夠看到所請求的頁面瀏覽器中顯示的每個部分。

二、瀏覽器引擎----瀏覽器之間的界面行爲和渲染引擎。

三、渲染引擎 ----負責顯示所請求的內容。例如，若是請求的內容是HTML，它負責解析HTML和CSS，並在屏幕上顯示的解析內容。

四、網絡 ---- 網絡調用，如用於HTTP請求。它具備平臺無關的接口，併爲每一個平臺下面實現的。

五、UI後端 ---- 用於繪製基本部件，如組合框和Windows控件。它暴露了一個通用的接口即不特定於某一平臺的。它的下面使用的操做系統的用戶界面的方法。

六、JavaScript解釋器----用於解析和執行的JavaScript代碼。

七、數據存儲----這是一個持久層，瀏覽器保存在硬盤上的數據，例如：cookies。新的HTML規範（HTML5）定義「網絡數據庫」，這是一個完整的（雖然是輕量級）在瀏覽器中的數據庫。

圖1：瀏覽器的主要組成部分

重要的是要注意，Chrome不像大多數的瀏覽器只提供一個渲染引擎，它擁有多個實例的渲染引擎，爲每一個標籤提供。每一個選項卡是一個單獨的進程。

第2章

渲染引擎
渲染引擎的責任... 渲染，就是所要求的內容瀏覽器屏幕上顯示。

默認狀況下，渲染引擎能夠顯示HTML和XML文檔和圖像。經過一個插件（或瀏覽器擴展），它能夠顯示其餘類型。例如，使用PDF查看器中顯示PDF格式插件。然而，在這一章中，咱們將重點放在主要的用例：使用CSS格式化顯示HTML和圖像。

2.1 渲染引擎

咱們的參考瀏覽器 - 火狐，Chrome和Safari是創建在兩個渲染引擎之上。Firefox的使用Gecko - 「自制的」Mozilla的渲染引擎；Safari和Chrome使用是Webkit。WebKit是一個開源渲染引擎，開始時爲Linux平臺的引擎， 是由蘋果公司修改後，以支持Mac和Windows。點擊webkit.org查看詳細內容。

2.2 主要流程

渲染引擎將開始從網絡層獲取所要求的文件的內容，這一般是在8K的塊。

以後，這是渲染引擎的基本流程：

圖2：渲染引擎的基本流程

渲染引擎開始解析HTML文檔，轉換樹中的標籤到DOM節點，它被稱爲「內容樹」。它將解析樣式數據，包括外部CSS文件和樣式元素。樣式信息與HTML中的視覺指示信息，將被用於建立另外一個樹 ---- 渲染樹。

渲染樹中包含的視覺屬性，如顏色和尺寸的矩形。矩形被正確的順序顯示在屏幕上。

建設渲染樹後，它通過一個「佈局」的過程。這意味着給每一個節點所應該出如今屏幕上的精確座標。下一階段是繪製 ---- 將遍歷渲染樹，每一個節點將使用UI後端層來繪製。

重要的是要明白，這是一個漸進的過程。爲了達到更好的用戶體驗，渲染引擎將努力盡量快地在屏幕上顯示內容。它在全部的HTML解析完成以前就開始建設和佈局渲染樹。部份內容將被解析和顯示，而這個過程會一直持續，其他的內容則使來自網絡。

2.3 主要流程實例

圖3：Webkit主要流程

圖4：Mozilla的Gecko渲染引擎的主要流程

從圖3和4能夠看到，儘管WebKit和Gecko的使用策略稍有不一樣，流程基本上是相同的的。

Gecko稱視覺格式化的元素樹爲一個「框架樹」。每一個元素都是一個框架。Webkit的使用術 語爲「渲染樹」，而且它由「渲染對象」組成。Webkit的使用術語「佈局」來描述元素的放置，而Gecko稱之爲「迴流」。「附件」是WebKit鏈接 DOM節點和視覺信息來建立渲染樹的術語。一個輕微的非語義的區別是，Gecko（Molla瀏覽器的排版引擎）有一個HTML和DOM樹之間額外的層。這就是所謂的「內容匯」，是一個DOM元素的工廠。咱們將討論流程的每一部分。