瀏覽器的工作機制

一、概述

　　網絡瀏覽器可能是最廣泛使用的軟件了。本文中我將解釋它們在幕后是如何工作的，我們將看到從你在地址欄中輸入“google.com”，直到谷歌的頁面出現在瀏覽器屏幕的過程中發生了什么。

　　1、我們將要討論的瀏覽器

　　現在主要有五種瀏覽器被使用，分別是：IE、火狐、Safari、Chrome和歐朋。根據W3C瀏覽器的統計資料，目前(2009年9月)，Firefox, Safari and Chrome瀏覽的使用份額總和將近有60%。

因此在當前，開源瀏覽器是瀏覽器市場的中堅力量。

　　2、瀏覽器的主要功能

　　瀏覽器主要的功能是展示你所選擇的網絡資源，通過向服務器請求並顯示在瀏覽器的窗口中。資源的格式通常是HTML，或者PDF、image等等。資源的位置是由用戶使用的URI(統一資源標識符)來指定的。瀏覽器解釋和顯示HTML文件的方式根據HTML和CSS規范來指定。這些規范是由W3C組織維護的，W3C是網絡標准組織。

　　當前HTML的版本號是4(http://www.w3.org/TR/html401/)，版本5還在制定中。當前的CSS版本號是2(http://www.w3.org/TR/CSS2/)，版本3仍在制定中。多年來瀏覽器只遵循了規范的一部分，並且開發了他們自己的擴展。這給瀏覽器的使用者帶來了嚴重的兼容性問題。現在絕大部分的瀏覽器都基本上遵循了規范。

　　瀏覽器的用戶界面彼此有很多共同之處，其中常見的用戶頁面元素有：

• 寫入URI的地址欄
• 后退和前進按鈕
• 書簽選項
• 用來刷新和停止加載當前文件的刷新和停止按鈕

　　奇怪的是，瀏覽器的用戶界面沒有在任何正式的規范中指定，這些是多年來各瀏覽器廠商之間相互模仿和不斷改進得結果。HTML5規范並沒有定義瀏覽器中必須具有的UI元素，包括地址欄、狀態欄和工具欄。還有一些瀏覽器擁有自己特有的功能，像火狐的下載管理器。

　　3、瀏覽器的主要構成

　　瀏覽器的主要部件有：

1. 用戶界面：包括地址欄、后退和前進按鈕、書簽菜單等等。也就是除了用來顯示你請求頁面的主窗口的其他部分。

2. 瀏覽器引擎：查詢和操作渲染引擎的接口

3. 渲染引擎： 負責顯示請求的內容，例如請求的是HTML內容，它負責解析HTML和CSS並將解析的內容顯示在屏幕上。

4. 網絡：用來網絡調用，例如HTTP請求，它有平台無關的接口，可以在不同的平台上工作。

5. 界面后端：用來繪制類似組合選擇框及對話框等基本組件，具有不限定於某個平台的通用接口，底層使用操作系統的用戶接口。

6. JS解釋器：使用它來解析和執行JS代碼。

7. 數據存儲：屬於持久層，瀏覽器需要將各種格式的數據保存在硬盤上，例如cookies。最新的HTML規范(HTML5)定義網絡數據庫是一種完整的輕量級客戶端數據庫。

　　下面為瀏覽器的主要構件示意圖：

 

　　

　　ps:需要特別指出的是，不同於大部分瀏覽器，Chrome為每個標簽分配了各自的渲染引擎實例，每個標簽就是一個獨立的進程。

　　對於每一個組件，我將在后面的章節中進行逐一闡述。

　　4、組件之間的通信

　　Firefox和Chrome都開發了一套特殊的通信結構，后面將有專門的一章進行討論。

二、渲染引擎

　　渲染引擎的職責是…渲染，就是在瀏覽器屏幕上顯示請求的內容。默認情況下，渲染引擎能夠顯示HTML和XML文件以及圖片。通過插件(一種瀏覽器擴展)可以顯示其它類型文件。例如通過使用PDF查看插件顯示PDF文件。我們將用一個章節來討論插件和擴展。這里只討論渲染引擎最主要的用途——顯示應用了CSS之后的HTML和圖片。

　　1、渲染引擎

　　我們所討論的瀏覽器：Firefox, Chrome 和 Safari是基於兩種渲染器構建的。Firefox使用Gecko一種Mozilla自主研發的渲染引擎。afari 和 Chrome使用的都是Webkit。

　　Webkit是一種開源渲染引擎，它一開始是在Linux平台上使用的，后來被Apple改進並應用到Mac及Windows上，更多詳情請參考http://webkit.org。

　　2、主要流程

　　渲染引擎首先從網絡層獲取請求的內容，通常以8K分塊的方式完成。

　　下面是渲染引擎的基本流程：

　　

　　渲染引擎首先解析HTML文件，將標簽轉化為內容樹的DOM節點。然后將解析外部CSS文件和style標簽中的樣式信息。這些樣式信息和HTML中的可見性指令將會被用來構建另一顆樹—渲染樹(渲染樹由一些包含有顏色和大小等屬性的矩形組成，這些矩形按照正確的順序顯示在屏幕上)。

　　渲染樹構建好之后，將執行布局過程。這將出給每個節點在屏幕上出現的確切坐標。接下來的步驟是繪制—遍歷渲染樹，並使用后端UI層繪制出每一個節點。

　　值得一提的是，這是一個逐步的過程。為了更好的用戶體驗，渲染引擎將更可能早的將內容顯示在屏幕上，而不會等到所有的HTML都解析完之后再去構建和布局渲染樹，它是邊解析邊顯示內容的，與此同時還可能通過網絡下載余下內容。

　　3、主要流程實例

　　　　　　　　　　　　圖 Webkit main flow

　　

 

　　　　　　　　　　　 圖 Mozilla's Gecko rendering engine main flow

　　

　　通過上面兩幅圖可以看到盡管Webkit和Gecko使用稍微不同的術語，但是流程基本是相同的。Gecko稱可見的格式化元素組成的樹為frame樹。

　　每個元素都是一個frame。webkit則使用“Render Tree”這個名詞來命名由渲染對象組成的樹。Webkit中元素的定位稱為布局，而Gecko中稱為回流。Webkit稱連接DOM節點及樣式信息去構建render樹的過程為”attachment”，Gecko在html和dom樹之間附加了一層，這層稱為內容接收器，相當制造DOM元素的工廠。下面將討論流程中的各個階段。

三、解析和DOM樹構建

　　1、解析-常規

　　因為解析是渲染引擎中一個非常重要的過程，我們將更深入研究一下它。讓我們首先介紹一下解析。

　　解析一個文件是將其轉化為具有一定意義的結構—可以理解和使用的代碼。解析的結果通常是一顆表示文件結構的節點樹，稱為解析樹或語法樹。

　　例子—解析表達式“2+3-1”，可能返回這樣一顆樹：

　　

　　語法

　　解析基於文檔依據的語法規則-文檔的語言或格式。每種可被解析的格式必須具有由詞匯及語法規則組成的特定文法，稱為上下文無關文法。人類語言不具有這一特性，因此不能通過常用的解析技術解析。

　　解析器-詞法分析器

　　解析可以被分為兩個子過程-語法分析和詞法分析。

　　詞法分析就是將輸入分解為符號。符號是語言的詞匯表-有效構建塊的集合。對於人類而言，它相當於是我們字典中出現的所有單詞。

　　語法分析是指對語言應用語法規則。

　　解析器通常將工作分配給兩個組件-詞法分析器負責將輸入分解為合法的符號，解析器負責按照語言的語法規則分析文檔結構從而構建解析樹。詞法分析器知道怎么跳過空白和換行之類的無關字符。

　　

　　解析過程是迭代的。解析通常向詞法分析器獲取一個新的符號然后試圖用這個符號去匹配一條語法規則。如果有一條規則被匹配到，那么這個符號對應的節點將會被添加到解析樹中，然后請求另一個符號。如果沒有匹配到規則，解析器將在內部保存該符號並繼續從詞法分析器中獲取符號直到所有內部保存的符號能夠匹配一條規則。如果最終沒有找到匹配的規則，解析器將會拋出一個異常，這意味着文檔無效或者包含語法錯誤。

　　轉換

　　很多時候解析樹不是最終的結果。解析一般在轉換中使用—將輸入文檔轉化成另一種格式。編譯就是一個例子。編譯器將源代碼編譯成機器碼，首先將其解析為一顆解析樹然后將樹轉換為機器碼文檔。

　　

　　解析實例

　　在圖表5中，我們從一個數學表達式中構建了一顆解析樹。讓我們來定義一個簡單的數學語言，看看解析的過程。

　　詞匯表：我們的語言可以包括整數，加號和減號。

　　語法：

　　　　1、該語言的語法基本單元包括表達式，術語和操作符。

　　　　2、該語言可以包括多個表達式

　　　　3、一個表達式定義為兩個term通過一個操作符連接

　　　　4、一個操作符是一個加號或者一個減號

　　　　5、一個term是一個整數或是一個表達式

　　現在來分析一下“2+3-1”這個輸入:

　　第一個匹配規則的子字符串是“2”，根據規則5這是一個term。第二個匹配的是“2+3”，一個term后跟着一個操作符再連接着另一個term。下一個匹配在輸入的結束處。“2+3-1”是一個表達式因為我們已經知道?2+3?是一個term，所以我們有了一個term緊跟着一個操作符及另一個term。“2＋＋”將不會匹配任何規則，因此是一個無效輸入

　　詞匯和語法的正式定義

　　詞匯通常通過正則表達式來表示。

　　例如我們語法將會被定義成：　

　　INTEGER :0|[1-9][0-9]*

　　PLUS : +

　　MINUS: -
　　可見，整數通過一個正則表達式來定義。

　　語法通常以一種被稱作BNF的格式來定義，我們的語言將會被定義成：

　　expression :=  term  operation  term

　　operation :=  PLUS | MINUS

　　term := INTEGER | expression

　　我們說如果一種語言如果它的語法是上下文無關文法，則可以通過解析器來解析。對於上下文無關文法的一個直觀的定義是該文法能夠用BNF來完整的表達。正式的定義可查閱http://en.wikipedia.org/wiki/Context-free_grammar

　　解析類型

　　有兩種基礎的解析器類型—自頂向下解析器和自底向上解析器。比較直觀的解釋是，自頂向下解析器是查看句法的最高層結構，然后嘗試匹配其中一個，自底向上解析器從輸入開始，然后逐步轉換為句法規則，從底層規則開始直到匹配最高層規則。

　　我們來看一下這兩種類型的解析器是如何解析我們的例子的：

　　自頂向上解析器從最高層規則開始—它將“2+3”作為一個表達式，然后識別“2+3-1”為一個表達式。

　　自底向上解析器將掃描輸入直到匹配一條規則，然后用該規則取代匹配的輸入，直到解析完所有輸入。有一部分匹配的表達式被放在解析堆棧中。

　　

　　這種自底向上的類型被稱為轉換減少解析器，因為輸入向右移動，並且逐漸簡化為語法規則。

　　自動化解析器

　　有些工具可以產生一個解析器，它們被稱為解析器生成器。你需要指定語言的語法—詞匯表和句法規則，它就可以生成有一個解析器。創建一個解析器需要對解析有一個深入的理解，手動去創建一個性能優良的解析器是不容易的，因此解析器生成器是非常有用的。

　　Webkit 使用了兩個很著名的解析器生成器——用於創建語法分析器的Flex及創建解析器的Bison。Flex的輸入是一個包含了符號定義的正則表達式，Bison的輸入是用BNF格式表示的語法規則。

　　2、HTML解析器

　　3、CSS解析

　　4、處理腳本和樣式表的順序

四、構建渲染樹

五、布局

六、備注

　　本文是由一篇外國文章翻譯而成，外文地址鏈接為http://taligarsiel.com/Projects/howbrowserswork1.htm#The_browsers_we_will_talk_about。后續待更新。