介紹：

瀏覽器可能是最常用的軟件之一了， 以下將會介紹當你在地址欄輸入 'google.com' 后，瀏覽器背后的故事。

我們將會討論的瀏覽器：

主流瀏覽器的五大類：

Internet Explorer, Firefox, Safari, Chrome and Opera， 我將會解釋一些半開源的瀏覽器的工作方式：

Firefox,Chrome and Safari。根據(jù) W3C 的統(tǒng)計，這3中瀏覽器的使用已經(jīng)接近 60%.

瀏覽器的主要功能：

瀏覽器的主要功能是呈現(xiàn)你選擇的資源內(nèi)容，從服務器獲取資源并展現(xiàn)在瀏覽器中。 資源的主要形式是HTML, 或者 PDF ， 圖片或者其他的?？蛻羰褂肬RI找到這些資源。

瀏覽器按照W3C的規(guī)范解析HTML和CSS。但瀏覽器廠商僅僅實現(xiàn)了規(guī)范的一部分并增加了他們自己的擴展，這為開發(fā)者們造成了不少的麻煩，但如今，大部分的瀏覽器廠商都會或多或少的遵守W3C的規(guī)范。

瀏覽器的UI非常相似，大多都有如下功能：

• 地址欄用于URI的輸入
• 前進和后退按鈕
• 書簽
• 刷新或停止加載
• 回到首頁按鈕

這非常奇怪，因為瀏覽器的UI并不是規(guī)范的一部分，這是經(jīng)年累月的用戶實踐造成的相似。H5 的標準并沒有定義瀏覽器必須要有哪些UI元素，但列出了一些常用的UI元素：地址欄、狀態(tài)欄和工具欄。當然，也有一些比較特殊的功能比如Firefox的下載管理功能。

瀏覽器的主要結(jié)構(gòu)：

1. UI。包括地址欄、前進后退按鈕、書簽管理器等等，除了你用來看請求資源的窗口以外的其他，都算是瀏覽器的UI。

2. browser engine 。 用于查詢和操作渲染引擎。 rendering engine.

3. rendering engine。 負責展示資源。 比如如果請求了HTML, 它將會負責將HTML 、CSS編譯和展現(xiàn)在屏幕上。

4. Networking。 用于處理網(wǎng)絡請求。是一個獨立的部分。

5. UI backend。 用于繪制一些基礎組件，例如組合框和窗口。暴露了一些非特定平臺使用的通用接口，內(nèi)部使用了操作系統(tǒng)的一些接口和方法。

6. JavaScript interpreter. 用于解釋執(zhí)行JS 。

7. Data storage. 用于持久化數(shù)據(jù)的層，一些需要儲存到硬盤的數(shù)據(jù)，例如 cookies 。 是一個瀏覽器上的小型數(shù)據(jù)庫。

和所有其他瀏覽器不同，Chrome 擁有

多個渲染引擎實例 - 每個標簽頁都有一個實例。每個選項卡是一個單獨的過程

以下將會詳述各個部分。

就是以下流程了：

image.png

image.png

渲染引擎從解析HTML并將標簽轉(zhuǎn)譯成DOM節(jié)點開始，這種節(jié)點樹通常被叫做 "content tree"（內(nèi)容樹）。 它會解析無論是內(nèi)連還是外鏈樣式文件。樣式信息同HTML的架構(gòu)信息將會建立一種新的樹形系統(tǒng)，'render tree' （渲染樹）。

'render tree' （渲染樹）包含許許多多的帶視覺信息的矩形，這些視覺信息包括顏色、大小等等。然后這些矩形將會以一定的順序被呈現(xiàn)在屏幕上。

在'render tree' （渲染樹）建造完成后，將會進行一個叫 'layout' 的過程。這個過程將會給每個node節(jié)點詳細的坐標。下一步是 'painting' ,'render tree' （渲染樹）將會與節(jié)點穿插然后使用UI backend層渲染。

非常重要的是這個過程是逐步推進的。為了更好的用戶體驗，渲染引擎嘗試盡快地渲染內(nèi)容。所以它不會等待所有HTML文件被解析就開始著手搭建layout和渲染樹。剩余的內(nèi)容持續(xù)不斷的從互聯(lián)網(wǎng)獲得，與此同時部分內(nèi)容已經(jīng)被轉(zhuǎn)譯并展現(xiàn)在頁面上。

image.png

Figure 3: Webkit main flow

image.png

Figure 4: Mozilla's Gecko rendering engine main flow

從上述兩張圖片可以看出，Webkit 和 Gecko 用了稍微不同的術(shù)語，但主要流程是基本相似的。

Gecko 將視覺上格式化的元素集合叫做 ‘Frame tree’(框架樹)，每一個元素都是一個框架。Webkit 叫它 render tree, render tree 中的每一個元素都是一個 ‘ render objects'. webkit 將放置元素到相應地點的過程叫做 ' layout ' 而 Gecko 叫他叫做 'reflow' 。Webkit 將鏈接DOM節(jié)點和視覺信息用于構(gòu)建render tree 的過程叫做 'Attachment'. 還有一個叫法的小不同在 Gecko 在HTML和DOM樹之間有一個附加的層 ‘content sink’, 它實際上是一個制作DOM 元素的工廠。我們下面對每一個部分進行詳細敘述

Parsing -通用

由于解析HTML這個過程在渲染中是非常重要的，我們稍微深入一些。下面稍微介紹一下什么是解析。

解析是將一個文檔轉(zhuǎn)譯成程序可以理解的某種結(jié)構(gòu)，他的結(jié)果通常是代表了文檔結(jié)構(gòu)的節(jié)點樹（Node tree），我們叫他 解析樹或語法樹（parse tree or a syntax tree）

例如， 解析"2 + 3 - 1"將會返回：

image.png

Grammars - 語法

解析文檔依靠確定的詞匯和句法規(guī)則，這叫做上下文無關(guān)語法。人類的語言不符合這種可譯的結(jié)構(gòu)所以無法被這種技術(shù)解析。

Parser - 語法分析程序

解析分為兩部分：句法分析和詞法分析。

詞法分析是將輸入變成記號的過程。這些記號是一種有效集合，就像人類語言的字典一樣。

句法分析就是應用語言的句法規(guī)則。

解析器通常分為兩個部分，詞法分析器和解析器。詞法分析器將輸入的內(nèi)容符號化，解析器依照語言句法規(guī)范分析文檔來建立解析樹（parse tree）詞法分析器知道怎么跳過無關(guān)緊要的東西比如恐嚇和換行。

image.png

Figure 6: from source document to parse trees

解析過程是迭代進行的。解析器項詞法分析器要來新的需要分析的項（token）然后嘗試用它來匹配句法規(guī)則，如果符合了，一個新節(jié)點就會產(chǎn)生并懸掛到解析樹上，然后解析器會去要下一個需要分析的項。

如果有一個項沒有規(guī)則可以匹配，解析器會將這個項儲存在內(nèi)部，然后繼續(xù)下一個項一直到某一個規(guī)則可以適用內(nèi)部儲存的項。如果沒有可適用的項，那么解析器將會拋出一個語法錯誤（syntax errors）

Translation

大多時候解析樹并不是最后的產(chǎn)物，解析常常用于將某種語言轉(zhuǎn)換為另一種格式，比如匯編。編譯器將遠嗎先解析成解析樹而后轉(zhuǎn)譯成匯編語言。

image.png

Figure 7: compilation flow

一個解析的例子：

如圖5所示，我們建立了一顆解析樹，我們嘗試定義一種簡單的數(shù)學語言然后看看解析的過程。

詞匯表： 數(shù)字、加號、減號

句法：

1. 構(gòu)建塊為表達式、項和操作符。
2. 表達式中可包含任何數(shù)字。
3. 一個表達式的定義形如：項 操作符 項
4. 操作符是指加號和減號
5. 項 是指一個數(shù)字或者一個表達式

由此，我們可以分析 "2 + 3 - 1"

第一個符合規(guī)則的是 '2', 根據(jù)句法規(guī)則5，它是一個項。而后符合規(guī)則的是 "2+3", 它符合句法規(guī)則2. 而后符合規(guī)則的是

"2 + 3 - 1"，因為它也符合規(guī)則5， 因為 “2+3”是一個項。而

"2 + + "是不符合上述任何一個條件的，所以是一個無效的輸入。