最近發(fā)現(xiàn)了一篇不錯(cuò)的文章，分享給大家，對于寫了很久前端代碼但不了解瀏覽器原理的朋友應(yīng)該有很大幫助。

　　這是一篇全面介紹 Webkit 和 Gecko 內(nèi)部操作的入門文章，是以色列開發(fā)人員塔利·加希爾大量研究的成果。在過去的幾年中，她查閱了所有公開發(fā)布的關(guān)于瀏覽器內(nèi)部機(jī)制的數(shù)據(jù)（請參見資源），并花了很多時(shí)間來研讀網(wǎng)絡(luò)瀏覽器的源代碼。

她寫道：

　　在 IE 占據(jù) 90% 市場份額的年代，我們除了把瀏覽器當(dāng)成一個(gè)“黑箱”，什么也做不了。但是現(xiàn)在，開放源代碼的瀏覽器擁有了過半的市場份額，因此，是時(shí)候來揭開神秘的面紗，一探網(wǎng)絡(luò)瀏覽器的內(nèi)幕了。呃，里面只有數(shù)以百萬行計(jì)的 C++ 代碼...

　　塔利在她的網(wǎng)站上公布了自己的研究成果，但是我們覺得它值得讓更多的人來了解，所以我們在此重新整理并公布。

　　作為一名網(wǎng)絡(luò)開發(fā)人員，學(xué)習(xí)瀏覽器的內(nèi)部工作原理將有助于您作出更明智的決策，并理解那些最佳開發(fā)實(shí)踐的個(gè)中緣由。盡管這是一篇相當(dāng)長的文檔，但是我們建議您花些時(shí)間來仔細(xì)閱讀；讀完之后，您肯定會(huì)覺得所費(fèi)不虛。保羅·愛麗詩 (Paul Irish)，Chrome 瀏覽器開發(fā)人員事務(wù)部

簡介

　　網(wǎng)絡(luò)瀏覽器很可能是使用最廣的軟件。在這篇入門文章中，我將會(huì)介紹它們的幕后工作原理。我們會(huì)了解到，從您在地址欄輸入?google.com?直到您在瀏覽器屏幕上看到 Google 首頁的整個(gè)過程中都發(fā)生了些什么。

我們要討論的瀏覽器

　　目前使用的主流瀏覽器有五個(gè)：Internet Explorer、Firefox、Safari、Chrome 瀏覽器和 Opera。本文中以開放源代碼瀏覽器為例，即 Firefox、Chrome 瀏覽器和 Safari（部分開源）。根據(jù)?StatCounter 瀏覽器統(tǒng)計(jì)數(shù)據(jù)，目前（2011 年 8 月）Firefox、Safari 和 Chrome 瀏覽器的總市場占有率將近 60%。由此可見，如今開放源代碼瀏覽器在瀏覽器市場中占據(jù)了非常堅(jiān)實(shí)的部分。

瀏覽器的主要功能

　　瀏覽器的主要功能就是向服務(wù)器發(fā)出請求，在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源。這里所說的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。資源的位置由用戶使用 URI（統(tǒng)一資源標(biāo)示符）指定。

　　瀏覽器解釋并顯示 HTML 文件的方式是在 HTML 和 CSS 規(guī)范中指定的。這些規(guī)范由網(wǎng)絡(luò)標(biāo)準(zhǔn)化組織?W3C（萬維網(wǎng)聯(lián)盟）進(jìn)行維護(hù)。?
　　多年以來，各瀏覽器都沒有完全遵從這些規(guī)范，同時(shí)還在開發(fā)自己獨(dú)有的擴(kuò)展程序，這給網(wǎng)絡(luò)開發(fā)人員帶來了嚴(yán)重的兼容性問題。如今，大多數(shù)的瀏覽器都是或多或少地遵從規(guī)范。

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

• 用來輸入 URI 的地址欄

• 前進(jìn)和后退按鈕

• 書簽設(shè)置選項(xiàng)

• 用于刷新和停止加載當(dāng)前文檔的刷新和停止按鈕

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

　　奇怪的是，瀏覽器的用戶界面并沒有任何正式的規(guī)范，這是多年來的最佳實(shí)踐自然發(fā)展以及彼此之間相互模仿的結(jié)果。HTML5 也沒有定義瀏覽器必須具有的用戶界面元素，但列出了一些通用的元素，例如地址欄、狀態(tài)欄和工具欄等。當(dāng)然，各瀏覽器也可以有自己獨(dú)特的功能，比如 Firefox 的下載管理器。

瀏覽器的高層結(jié)構(gòu)

　　瀏覽器的主要組件為：

• 用戶界面?- 包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其他顯示的各個(gè)部分都屬于用戶界面。

• 瀏覽器引擎?- 在用戶界面和呈現(xiàn)引擎之間傳送指令。

• 呈現(xiàn)引擎?- 負(fù)責(zé)顯示請求的內(nèi)容。如果請求的內(nèi)容是 HTML，它就負(fù)責(zé)解析 HTML 和 CSS 內(nèi)容，并將解析后的內(nèi)容顯示在屏幕上。

• 網(wǎng)絡(luò)?- 用于網(wǎng)絡(luò)調(diào)用，比如 HTTP 請求。其接口與平臺(tái)無關(guān)，并為所有平臺(tái)提供底層實(shí)現(xiàn)。

• 用戶界面后端?- 用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與平臺(tái)無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。

• JavaScript 解釋器。用于解析和執(zhí)行 JavaScript 代碼。

• 數(shù)據(jù)存儲(chǔ)。這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)，例如 Cookie。新的 HTML 規(guī)范 (HTML5) 定義了“網(wǎng)絡(luò)數(shù)據(jù)庫”，這是一個(gè)完整（但是輕便）的瀏覽器內(nèi)數(shù)據(jù)庫。

圖：瀏覽器的主要組件。

?

　　值得注意的是，和大多數(shù)瀏覽器不同，Chrome 瀏覽器的每個(gè)標(biāo)簽頁都分別對應(yīng)一個(gè)呈現(xiàn)引擎實(shí)例。每個(gè)標(biāo)簽頁都是一個(gè)獨(dú)立的進(jìn)程。

呈現(xiàn)引擎

　　呈現(xiàn)引擎的作用嘛...當(dāng)然就是“呈現(xiàn)”了，也就是在瀏覽器的屏幕上顯示請求的內(nèi)容。

　　默認(rèn)情況下，呈現(xiàn)引擎可顯示 HTML 和 XML 文檔與圖片。通過插件（或?yàn)g覽器擴(kuò)展程序），還可以顯示其它類型的內(nèi)容；例如，使用 PDF 查看器插件就能顯示 PDF 文檔。但是在本章中，我們將集中介紹其主要用途：顯示使用 CSS 格式化的 HTML 內(nèi)容和圖片。

呈現(xiàn)引擎

　　本文所討論的瀏覽器（Firefox、Chrome 瀏覽器和 Safari）是基于兩種呈現(xiàn)引擎構(gòu)建的。Firefox 使用的是 Gecko，這是 Mozilla 公司“自制”的呈現(xiàn)引擎。而 Safari 和 Chrome 瀏覽器使用的都是 Webkit。

　　Webkit 是一種開放源代碼呈現(xiàn)引擎，起初用于 Linux 平臺(tái)，隨后由 Apple 公司進(jìn)行修改，從而支持蘋果機(jī)和 Windows。有關(guān)詳情，請參閱?webkit.org。

主流程

　　呈現(xiàn)引擎一開始會(huì)從網(wǎng)絡(luò)層獲取請求文檔的內(nèi)容，內(nèi)容的大小一般限制在 8000 個(gè)塊以內(nèi)。

　　然后進(jìn)行如下所示的基本流程：

圖：呈現(xiàn)引擎的基本流程。

?

　　呈現(xiàn)引擎將開始解析 HTML 文檔，并將各標(biāo)記逐個(gè)轉(zhuǎn)化成“內(nèi)容樹”上的?DOM?節(jié)點(diǎn)。同時(shí)也會(huì)解析外部 CSS 文件以及樣式元素中的樣式數(shù)據(jù)。HTML 中這些帶有視覺指令的樣式信息將用于創(chuàng)建另一個(gè)樹結(jié)構(gòu)：呈現(xiàn)樹。

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

　　呈現(xiàn)樹構(gòu)建完畢之后，進(jìn)入“布局”處理階段，也就是為每個(gè)節(jié)點(diǎn)分配一個(gè)應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。下一個(gè)階段是繪制?- 呈現(xiàn)引擎會(huì)遍歷呈現(xiàn)樹，由用戶界面后端層將每個(gè)節(jié)點(diǎn)繪制出來。

　　需要著重指出的是，這是一個(gè)漸進(jìn)的過程。為達(dá)到更好的用戶體驗(yàn)，呈現(xiàn)引擎會(huì)力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè) HTML 文檔解析完畢之后，就會(huì)開始構(gòu)建呈現(xiàn)樹和設(shè)置布局。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)，呈現(xiàn)引擎會(huì)將部分內(nèi)容解析并顯示出來。

主流程示例

圖：Webkit 主流程

圖：Mozilla 的 Gecko 呈現(xiàn)引擎主流程?

　　從上圖可以看出，雖然 Webkit 和 Gecko 使用的術(shù)語略有不同，但整體流程是基本相同的。

　　Gecko 將視覺格式化元素組成的樹稱為“框架樹”。每個(gè)元素都是一個(gè)框架。Webkit 使用的術(shù)語是“呈現(xiàn)樹”，它由“呈現(xiàn)對象”組成。對于元素的放置，Webkit 使用的術(shù)語是“布局”，而 Gecko 稱之為“重排”。對于連接 DOM 節(jié)點(diǎn)和可視化信息從而創(chuàng)建呈現(xiàn)樹的過程，Webkit 使用的術(shù)語是“附加”。有一個(gè)細(xì)微的非語義差別，就是 Gecko 在 HTML 與 DOM 樹之間還有一個(gè)稱為“內(nèi)容槽”的層，用于生成 DOM 元素。我們會(huì)逐一論述流程中的每一部分：

解析 - 綜述

　　解析是呈現(xiàn)引擎中非常重要的一個(gè)環(huán)節(jié)，因此我們要更深入地講解。首先，來介紹一下解析。

　　解析文檔是指將文檔轉(zhuǎn)化成為有意義的結(jié)構(gòu)，也就是可讓代碼理解和使用的結(jié)構(gòu)。解析得到的結(jié)果通常是代表了文檔結(jié)構(gòu)的節(jié)點(diǎn)樹，它稱作解析樹或者語法樹。

示例 - 解析?2 + 3 - 1?這個(gè)表達(dá)式，會(huì)返回下面的樹：

?

圖：數(shù)學(xué)表達(dá)式樹節(jié)點(diǎn)

語法

　　解析是以文檔所遵循的語法規(guī)則（編寫文檔所用的語言或格式）為基礎(chǔ)的。所有可以解析的格式都必須對應(yīng)確定的語法（由詞匯和語法規(guī)則構(gòu)成）。這稱為與上下文無關(guān)的語法。人類語言并不屬于這樣的語言，因此無法用常規(guī)的解析技術(shù)進(jìn)行解析。

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

　　解析的過程可以分成兩個(gè)子過程：詞法分析和語法分析。

　　詞法分析是將輸入內(nèi)容分割成大量標(biāo)記的過程。標(biāo)記是語言中的詞匯，即構(gòu)成內(nèi)容的單位。在人類語言中，它相當(dāng)于語言字典中的單詞。

　　語法分析是應(yīng)用語言的語法規(guī)則的過程。

　　解析器通常將解析工作分給以下兩個(gè)組件來處理：詞法分析器（有時(shí)也稱為標(biāo)記生成器），負(fù)責(zé)將輸入內(nèi)容分解成一個(gè)個(gè)有效標(biāo)記；而解析器負(fù)責(zé)根據(jù)語言的語法規(guī)則分析文檔的結(jié)構(gòu)，從而構(gòu)建解析樹。詞法分析器知道如何將無關(guān)的字符（比如空格和換行符）分離出來。

圖：從源文檔到解析樹

　　解析是一個(gè)迭代的過程。通常，解析器會(huì)向詞法分析器請求一個(gè)新標(biāo)記，并嘗試將其與某條語法規(guī)則進(jìn)行匹配。如果發(fā)現(xiàn)了匹配規(guī)則，解析器會(huì)將一個(gè)對應(yīng)于該標(biāo)記的節(jié)點(diǎn)添加到解析樹中，然后繼續(xù)請求下一個(gè)標(biāo)記。

　　如果沒有規(guī)則可以匹配，解析器就會(huì)將標(biāo)記存儲(chǔ)到內(nèi)部，并繼續(xù)請求標(biāo)記，直至找到可與所有內(nèi)部存儲(chǔ)的標(biāo)記匹配的規(guī)則。如果找不到任何匹配規(guī)則，解析器就會(huì)引發(fā)一個(gè)異常。這意味著文檔無效，包含語法錯(cuò)誤。

?

如果有對前端感興趣前端程序員，可以來我們的web前端技術(shù)學(xué)習(xí)群的哦618522268。會(huì)送前端的零基礎(chǔ)教程噢！

寫在最后：

很多人都知道我是學(xué)全棧的，都天真的以為我有全套的前端、網(wǎng)頁制作等視頻學(xué)習(xí)資料。我想說你們是對的，我的確有前端的全套視頻資料。

?

未完待續(xù)...

ps：寫給正在努力學(xué)習(xí)的朋友們，一個(gè)100行的代碼調(diào)試都可能會(huì)讓程序員遇到很多挫折，所以，面對挫折，我們永遠(yuǎn)不能低頭。

轉(zhuǎn)載于:https://www.cnblogs.com/gongyue/p/8941653.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。