瀏覽器工做過程詳解（譯）（二）

銜接

接着上文繼續。

在構建好render樹後，瀏覽器就開始進行佈局了。這意味着瀏覽器會給每一個節點正確的座標，讓它們出如今該出現的地方。下一步就是進行繪製了，瀏覽器將會遍歷render樹，每個節點都會被UI後端層所繪製。

很重要的一點是，這整個過程是漸進性的。爲了更好的用戶體驗，渲染引擎會盡快地解析內容到屏幕上。它並不會等到html徹底被解析纔開始建立和佈局render樹。一部份內容被解析了，那它就會馬上被繪製到頁面上，這這個過程當中，瀏覽器可能還在請求剩餘部分的內容。

主要流程實例

圖3 ：Webkit 主要流程

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

從圖3和圖4你能夠看到，雖然Webkit和Gecko在某些術語上稍有不一樣，可是主要流程是基本相同的。

Gecko把可見的格式化元素組成的樹爲「Frame」樹。每個元素都是一個frame。Webkit則把每個渲染對象組成的樹稱爲render樹。對每個元素的定位，Webkit稱爲佈局，而Gecko稱爲迴流。Webkit稱利用dom節點及樣式信息去構建render樹的過程爲attachment，Gecko在html和dom樹之間附加了一層，這層稱爲內容接收器，至關製造dom元素的工廠。下面將討論流程中的各個階段。

解析

解析是渲染引擎執行過程當中很是重要的部分，咱們將會稍微深刻地去探討一下。讓咱們先來簡單介紹一下什麼是解析。

解析一個文檔意味着須要將內容翻譯成某種編碼可以理解和使用的結構。而解析的結果一般是可以表達文檔結構的節點樹。它被稱爲解析樹或語法樹。

舉例來講，解析表達式「2+3-1」，應該返回以下的樹：

圖5:數學表達式的樹結構

語法

解析過程依賴於文檔聽從的語法規則——文檔的語言或格式。每種可解析的格式必須具備由詞彙及語法規則組成的特定的文法，這被稱爲上下文無關文法。人類的語言不具備這一特色，因此不能被常規的解析技術所解析。

解析器－詞法分析器

解析過程能夠被分爲兩個過程－詞法分析和語法分析。

詞法分析是把輸入解釋成符號的過程，而符號，是組成語言的基本有效單元。它至關於字典中全部的單詞，用以組成和表現人類語言。

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

一般狀況下，解析器將工做分配給兩個組件 － 詞法分析器（有時也被稱做標記解析器）主要負責把輸入分解成合法的符號，語法分析器主要負責依靠語法規則來分析文檔結構，並構建出解析樹。詞法分析器知道如何跳過相似空白符或者換行符之類的無關字符。

圖6:從源文檔到解析樹

解析過程是重複迭代的。解析器將會從詞法分析器獲取一個新符號，而且嘗試用某一種語法規則去匹配它。若是有規則匹配到了，那麼該符號相應的節點將會被添加到解析樹中，而後解析器會接着解析下一個符號。

若是沒有規則能夠匹配該符號，解析器將會在內部保存下這個符號，並繼續獲取下一個符號，直到有一條語法規則能夠匹配全部內部存儲的符號。若是到最後仍是沒有找到可以匹配的規則，那麼解析器將會拋出一個異常。這意味着該文檔不合法或者有語法錯誤。

轉換過程

一般狀況下，解析樹並非最終的結果。解析一般在轉換過程當中使用，而轉換用於將輸入文檔轉成另外一種格式。編譯過程就是一個例子。編譯器將源代碼編譯成機器碼時，首先作的就是把它解析成解析樹，而後再將解析樹轉化成機器碼文檔。

圖7:編譯流程

解析實例

在圖5中，咱們基於一段數學表達式建立了一棵解析樹。讓咱們來嘗試定義一門簡單的數學語言，而後看看解析過程。

詞彙表：咱們的語言包括了整數、加號和減號。

語法：

1. 咱們的語言的基本組成時表達式、術語和操做符

2. 能夠包含多個表達式

3. 兩個術語（term）經過操做符鏈接，這就造成一個表達式

4. 操做符只能是加號或減號

5. 一個術語（term）只能是一個整數或者一個表達式

讓咱們來分析一下輸入「2+3-1」後發生了什麼。

第一個匹配到規則的子串是「2」，根據規則5，它是一個術語（term）。第二個匹配到規則的是「2+3」，它匹配到第三條語法規則。下一次匹配將會在這個輸入的最後。「2+3-1」是一段表達式，由於咱們已經知道「2+3」是一個術語（term），接下去的「－」是一個操做符，再後面「1」是一個整數，也就是術語（term），這匹配了規則3。而「2++」不會匹配任何語法，因此它是一個非法輸入。