寫了這麼久前端，你知道瀏覽器原理嗎？

最近發現了一篇不錯的文章，分享給你們，對於寫了好久前端代碼但不瞭解瀏覽器原理的朋友應該有很大幫助。

　　這是一篇全面介紹 Webkit 和 Gecko 內部操做的入門文章，是以色列開發人員塔利·加希爾大量研究的成果。在過去的幾年中，她查閱了全部公開發布的關於瀏覽器內部機制的數據（請參見資源），並花了不少時間來研讀網絡瀏覽器的源代碼。

她寫道：

　　在 IE 佔據 90% 市場份額的年代，咱們除了把瀏覽器當成一個「黑箱」，什麼也作不了。可是如今，開放源代碼的瀏覽器擁有了過半的市場份額，所以，是時候來揭開神祕的面紗，一探網絡瀏覽器的內幕了。呃，裏面只有數以百萬行計的 C++ 代碼...

　　塔利在她的網站上公佈了本身的研究成果，可是咱們以爲它值得讓更多的人來了解，因此咱們在此從新整理並公佈。

　　做爲一名網絡開發人員，學習瀏覽器的內部工做原理將有助於您做出更明智的決策，並理解那些最佳開發實踐的箇中原因。儘管這是一篇至關長的文檔，可是咱們建議您花些時間來仔細閱讀；讀完以後，您確定會以爲所費不虛。保羅·愛麗詩 (Paul Irish)，Chrome 瀏覽器開發人員事務部

簡介

　　網絡瀏覽器極可能是使用最廣的軟件。在這篇入門文章中，我將會介紹它們的幕後工做原理。咱們會了解到，從您在地址欄輸入 google.com 直到您在瀏覽器屏幕上看到 Google 首頁的整個過程當中都發生了些什麼。

咱們要討論的瀏覽器

　　目前使用的主流瀏覽器有五個：Internet Explorer、Firefox、Safari、Chrome 瀏覽器和 Opera。本文中以開放源代碼瀏覽器爲例，即 Firefox、Chrome 瀏覽器和 Safari（部分開源）。根據 StatCounter 瀏覽器統計數據，目前（2011 年 8 月）Firefox、Safari 和 Chrome 瀏覽器的總市場佔有率將近 60%。因而可知，現在開放源代碼瀏覽器在瀏覽器市場中佔據了很是堅實的部分。

瀏覽器的主要功能

　　瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源。這裏所說的資源通常是指 HTML 文檔，也能夠是 PDF、圖片或其餘的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。

　　瀏覽器解釋並顯示 HTML 文件的方式是在 HTML 和 CSS 規範中指定的。這些規範由網絡標準化組織 W3C（萬維網聯盟）進行維護。 
　　多年以來，各瀏覽器都沒有徹底聽從這些規範，同時還在開發本身獨有的擴展程序，這給網絡開發人員帶來了嚴重的兼容性問題。現在，大多數的瀏覽器都是或多或少地聽從規範。

　　瀏覽器的用戶界面有不少彼此相同的元素，其中包括：

• 用來輸入 URI 的地址欄

• 前進和後退按鈕

• 書籤設置選項

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

• 用於返回主頁的主頁按鈕

　　奇怪的是，瀏覽器的用戶界面並無任何正式的規範，這是多年來的最佳實踐天然發展以及彼此之間相互模仿的結果。HTML5 也沒有定義瀏覽器必須具備的用戶界面元素，但列出了一些通用的元素，例如地址欄、狀態欄和工具欄等。固然，各瀏覽器也能夠有本身獨特的功能，好比 Firefox 的下載管理器。

瀏覽器的高層結構

　　瀏覽器的主要組件爲：

• 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。

• 瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。

• 呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。

• 網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。

• 用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。

• JavaScript 解釋器。用於解析和執行 JavaScript 代碼。

• 數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML 規範 (HTML5) 定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

圖：瀏覽器的主要組件。

 

　　值得注意的是，和大多數瀏覽器不一樣，Chrome 瀏覽器的每一個標籤頁都分別對應一個呈現引擎實例。每一個標籤頁都是一個獨立的進程。

呈現引擎

　　呈現引擎的做用嘛...固然就是「呈現」了，也就是在瀏覽器的屏幕上顯示請求的內容。

　　默認狀況下，呈現引擎可顯示 HTML 和 XML 文檔與圖片。經過插件（或瀏覽器擴展程序），還能夠顯示其它類型的內容；例如，使用 PDF 查看器插件就能顯示 PDF 文檔。可是在本章中，咱們將集中介紹其主要用途：顯示使用 CSS 格式化的 HTML 內容和圖片。

呈現引擎

　　本文所討論的瀏覽器（Firefox、Chrome 瀏覽器和 Safari）是基於兩種呈現引擎構建的。Firefox 使用的是 Gecko，這是 Mozilla 公司「自制」的呈現引擎。而 Safari 和 Chrome 瀏覽器使用的都是 Webkit。

　　Webkit 是一種開放源代碼呈現引擎，起初用於 Linux 平臺，隨後由 Apple 公司進行修改，從而支持蘋果機和 Windows。有關詳情，請參閱 webkit.org。

主流程

　　呈現引擎一開始會從網絡層獲取請求文檔的內容，內容的大小通常限制在 8000 個塊之內。

　　而後進行以下所示的基本流程：

圖：呈現引擎的基本流程。

 

　　呈現引擎將開始解析 HTML 文檔，並將各標記逐個轉化成「內容樹」上的 DOM 節點。同時也會解析外部 CSS 文件以及樣式元素中的樣式數據。HTML 中這些帶有視覺指令的樣式信息將用於建立另外一個樹結構：呈現樹。

　　呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。

　　呈現樹構建完畢以後，進入「佈局」處理階段，也就是爲每一個節點分配一個應出如今屏幕上的確切座標。下一個階段是繪製 - 呈現引擎會遍歷呈現樹，由用戶界面後端層將每一個節點繪製出來。

　　須要着重指出的是，這是一個漸進的過程。爲達到更好的用戶體驗，呈現引擎會力求儘快將內容顯示在屏幕上。它沒必要等到整個 HTML 文檔解析完畢以後，就會開始構建呈現樹和設置佈局。在不斷接收和處理來自網絡的其他內容的同時，呈現引擎會將部份內容解析並顯示出來。

主流程示例

圖：Webkit 主流程

圖：Mozilla 的 Gecko 呈現引擎主流程 

　　從上圖能夠看出，雖然 Webkit 和 Gecko 使用的術語略有不一樣，但總體流程是基本相同的。

　　Gecko 將視覺格式化元素組成的樹稱爲「框架樹」。每一個元素都是一個框架。Webkit 使用的術語是「呈現樹」，它由「呈現對象」組成。對於元素的放置，Webkit 使用的術語是「佈局」，而 Gecko 稱之爲「重排」。對於鏈接 DOM 節點和可視化信息從而建立呈現樹的過程，Webkit 使用的術語是「附加」。有一個細微的非語義差異，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱爲「內容槽」的層，用於生成 DOM 元素。咱們會逐一論述流程中的每一部分：

解析 - 綜述

　　解析是呈現引擎中很是重要的一個環節，所以咱們要更深刻地講解。首先，來介紹一下解析。

　　解析文檔是指將文檔轉化成爲有意義的結構，也就是可以讓代碼理解和使用的結構。解析獲得的結果一般是表明了文檔結構的節點樹，它稱做解析樹或者語法樹。

示例 - 解析 2 + 3 - 1 這個表達式，會返回下面的樹：

 

圖：數學表達式樹節點

語法

　　解析是以文檔所遵循的語法規則（編寫文檔所用的語言或格式）爲基礎的。全部能夠解析的格式都必須對應肯定的語法（由詞彙和語法規則構成）。這稱爲與上下文無關的語法。人類語言並不屬於這樣的語言，所以沒法用常規的解析技術進行解析。

解析器和詞法分析器的組合

　　解析的過程能夠分紅兩個子過程：詞法分析和語法分析。

　　詞法分析是將輸入內容分割成大量標記的過程。標記是語言中的詞彙，即構成內容的單位。在人類語言中，它至關於語言字典中的單詞。

　　語法分析是應用語言的語法規則的過程。

　　解析器一般將解析工做分給如下兩個組件來處理：詞法分析器（有時也稱爲標記生成器），負責將輸入內容分解成一個個有效標記；而解析器負責根據語言的語法規則分析文檔的結構，從而構建解析樹。詞法分析器知道如何將無關的字符（好比空格和換行符）分離出來。

圖：從源文檔到解析樹

　　解析是一個迭代的過程。一般，解析器會向詞法分析器請求一個新標記，並嘗試將其與某條語法規則進行匹配。若是發現了匹配規則，解析器會將一個對應於該標記的節點添加到解析樹中，而後繼續請求下一個標記。

　　若是沒有規則能夠匹配，解析器就會將標記存儲到內部，並繼續請求標記，直至找到可與全部內部存儲的標記匹配的規則。若是找不到任何匹配規則，解析器就會引起一個異常。這意味着文檔無效，包含語法錯誤。

 

若是有對前端感興趣前端程序員，能夠來咱們的web前端技術學習羣的哦618522268。會送前端的零基礎教程噢！

寫在最後：

不少人都知道我是學全棧的，都天真的覺得我有全套的前端、網頁製做等視頻學習資料。我想說大家是對的，個人確有前端的全套視頻資料。

 

未完待續...

ps：寫給正在努力學習的朋友們，一個100行的代碼調試均可能會讓程序員遇到不少挫折，因此，面對挫折，咱們永遠不能低頭。