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

　　這是一篇全面介紹 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行的代碼調試都可能會讓程序員遇到很多挫折，所以，面對挫折，我們永遠不能低頭。

轉載于:https://www.cnblogs.com/gongyue/p/8941653.html

總結

以上是生活随笔為你收集整理的写了这么久前端，你知道浏览器原理吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。