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

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

她寫(xiě)道：

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

　　塔利在她的網(wǎng)站上公布了自己的研究成果，但是我們覺(jué)得它值得讓更多的人來(lái)了解，所以我們?cè)诖酥匦抡聿⒐肌?/p>

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

簡(jiǎn)介

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

我們要討論的瀏覽器

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

瀏覽器的主要功能

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

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

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

• 用來(lái)輸入 URI 的地址欄

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

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

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

• 用于返回主頁(yè)的主頁(yè)按鈕

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

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

　　瀏覽器的主要組件為：

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

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

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

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

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

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

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

圖：瀏覽器的主要組件。

?

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

呈現(xiàn)引擎

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

　　默認(rèn)情況下，呈現(xiàn)引擎可顯示 HTML 和 XML 文檔與圖片。通過(guò)插件（或?yàn)g覽器擴(kuò)展程序），還可以顯示其它類(lèi)型的內(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 是一種開(kāi)放源代碼呈現(xiàn)引擎，起初用于 Linux 平臺(tái)，隨后由 Apple 公司進(jìn)行修改，從而支持蘋(píng)果機(jī)和 Windows。有關(guān)詳情，請(qǐng)參閱?webkit.org。

主流程

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

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

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

?

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

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

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

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

主流程示例

圖：Webkit 主流程

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

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

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

解析 - 綜述

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

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

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

?

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

語(yǔ)法

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

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

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

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

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

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

圖：從源文檔到解析樹(shù)

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

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

?

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

寫(xiě)在最后：

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

?

未完待續(xù)...

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

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

總結(jié)

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

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