以下內(nèi)容轉(zhuǎn)載自http://chuquan.me/2018/01/21/browser-architecture-overview/
一、瀏覽器的結(jié)構(gòu)
瀏覽器的抽象分層結(jié)構(gòu)圖中將瀏覽器分成了以下8個(gè)子系統(tǒng)：
用戶界面（User Interface）
用戶界面主要包括工具欄、地址欄、前進(jìn)/后退按鈕、書簽菜單、可視化頁面加載進(jìn)度、智能下載處理、首選項(xiàng)、打印等。除了瀏覽器主窗口顯示請(qǐng)求的頁面之外，其他顯示的部分都屬于用戶界面。
用戶界面還可以與桌面環(huán)境集成，以提供瀏覽器會(huì)話管理或與其他桌面應(yīng)用程序的通信。
瀏覽器引擎（Browser Engine）
瀏覽器引擎是一個(gè)可嵌入的組件，其為渲染引擎提供高級(jí)接口。
瀏覽器引擎可以加載一個(gè)給定的URI，并支持諸如：前進(jìn)/后退/重新加載等瀏覽操作。
瀏覽器引擎提供查看瀏覽會(huì)話的各個(gè)方面的掛鉤，例如：當(dāng)前頁面加載進(jìn)度、JavaScript alert。
瀏覽器引擎還允許查詢/修改渲染引擎設(shè)置。
渲染引擎（Rendering Engine）
渲染引擎為指定的URI生成可視化的表示。
渲染引擎能夠顯示HTML和XML文檔，可選擇CSS樣式，以及嵌入式內(nèi)容（如圖片）。
渲染引擎能夠準(zhǔn)確計(jì)算頁面布局，可使用“回流”算法逐步調(diào)整頁面元素的位置。
渲染引擎內(nèi)部包含HTML解析器。
網(wǎng)絡(luò)（Networking）
網(wǎng)絡(luò)系統(tǒng)實(shí)現(xiàn)HTTP和FTP等文件傳輸協(xié)議。 網(wǎng)絡(luò)系統(tǒng)可以在不同的字符集之間進(jìn)行轉(zhuǎn)換，為文件解析MIME媒體類型。 網(wǎng)絡(luò)系統(tǒng)可以實(shí)現(xiàn)最近檢索資源的緩存功能。
JavaScript解釋器（JavaScript Interpreter）
JavaScript解釋器能夠解釋并執(zhí)行嵌入在網(wǎng)頁中的JavaScript（又稱ECMAScript）代碼。 為了安全起見，瀏覽器引擎或渲染引擎可能會(huì)禁用某些JavaScript功能，如彈出窗口的打開。
XML解析器（XML Parser）
XML解析器可以將XML文檔解析成文檔對(duì)象模型（Document Object Model，DOM）樹。 XML解析器是瀏覽器架構(gòu)中復(fù)用最多的子系統(tǒng)之一，幾乎所有的瀏覽器實(shí)現(xiàn)都利用現(xiàn)有的XML解析器，而不是從頭開始創(chuàng)建自己的XML解析器。
顯示后端（Display Backend）
顯示后端提供繪圖和窗口原語，包括：用戶界面控件集合、字體集合。
數(shù)據(jù)持久層（Data Persistence）
數(shù)據(jù)持久層將與瀏覽會(huì)話相關(guān)聯(lián)的各種數(shù)據(jù)存儲(chǔ)在硬盤上。 這些數(shù)據(jù)可能是諸如：書簽、工具欄設(shè)置等這樣的高級(jí)數(shù)據(jù)，也可能是諸如：Cookie，安全證書、緩存等這樣的低級(jí)數(shù)據(jù)。
這里可能會(huì)產(chǎn)生一個(gè)疑問：功能相似的HTML解析器和XML解析器為什么前者劃分在渲染引擎中，后者作為獨(dú)立的系統(tǒng)？
原因：XML解析器對(duì)于系統(tǒng)來說，其功能并不是關(guān)鍵性的，但是從復(fù)用角度來說，XML解析器是一個(gè)通用的，可重用的組件，具有標(biāo)準(zhǔn)的，定義明確的接口。相比之下，HTML解析器通常與渲染引擎緊耦合。
瀏覽器的組成模塊眾多，而渲染引擎則是瀏覽器中最重要的模塊（渲染引擎有時(shí)候也被稱為“瀏覽器內(nèi)核”，這種說法并不嚴(yán)謹(jǐn)，不推薦使用）。目前，常見的渲染引擎有Trident、Gecko、WebKit等。下表所示為幾種渲染引擎在不同瀏覽器中的應(yīng)用：
渲染引擎瀏覽器
TridentIE、Edge
GeckoFirefox
WebKitSafari、Chromium/Chrome
如下圖所示為渲染引擎的渲染流程示意圖，其以HTML/JavaScript/CSS等文件作為輸入，以可視化內(nèi)容作為輸出。
Parsing HTML to Construct DOM Tree
渲染引擎使用HTML解析器（調(diào)用XML解析器）解析HTML（XML）文檔，將各個(gè)HTML（XML）元素逐個(gè)轉(zhuǎn)化成DOM節(jié)點(diǎn)，從而生成DOM樹。
同時(shí)，渲染引擎使用CSS解析器解析外部CSS文件以及HTML（XML）元素中的樣式規(guī)則。元素中帶有視覺指令的樣式規(guī)則將用于下一步，以創(chuàng)建另一個(gè)樹結(jié)構(gòu)：渲染樹。
Render Tree construction
渲染引擎使用第1步CSS解析器解析得到的樣式規(guī)則，將其附著到DOM樹上，從而構(gòu)成渲染樹。
渲染樹包含多個(gè)帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。
Layout of Render Tree
渲染樹構(gòu)建完畢之后，進(jìn)入本階段進(jìn)行“布局”，也就是為每個(gè)節(jié)點(diǎn)分配一個(gè)應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。
Painting Render Tree
渲染引擎將遍歷渲染樹，并調(diào)用顯示后端將每個(gè)節(jié)點(diǎn)繪制出來。
下圖所示為渲染引擎工作流程中各個(gè)步驟所對(duì)應(yīng)的模塊，其中第1步和第2步涉及到多個(gè)模塊，并且耦合程度較高。這樣的設(shè)計(jì)會(huì)為了達(dá)到更好的用戶體驗(yàn)，渲染引擎盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè)HTML文檔解析完畢之后，就可以開始渲染樹構(gòu)建和布局設(shè)置。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)，渲染引擎會(huì)將部分內(nèi)容解析并顯示出來。
從圖中可以看出，渲染引擎主要包含（或調(diào)用）的模塊有：
HTML（XML）解析器
解析HTML（XML）文檔，主要作用是將HTML（XML）文檔轉(zhuǎn)換成DOM樹。
CSS解析器
將DOM中的各個(gè)元素對(duì)象進(jìn)行計(jì)算，獲取樣式信息，用于渲染樹的構(gòu)建。
JavaScript解釋器
使用JavaScript可以修改網(wǎng)頁的內(nèi)容、CSS規(guī)則等。JavaScript解釋器能夠解釋JavaScript代碼，并通過DOM接口和CSSOM接口來修改網(wǎng)頁內(nèi)容、樣式規(guī)則，從而改變渲染結(jié)果。
布局
DOM創(chuàng)建之后，渲染引擎將其中的元素對(duì)象與樣式規(guī)則進(jìn)行結(jié)合，可以得到渲染樹。布局則是針對(duì)渲染樹，計(jì)算其各個(gè)元素的大小、位置等布局信息。
繪圖
使用圖形庫將布局計(jì)算后的渲染樹繪制成可視化的圖像結(jié)果。
參考
Adam Barth, Collin Jackson, Charles Reis, Google Chrome Team. The Security Architecture of the Chromium Browser.
Andre Campos, Bryan Lane, Neal Clark, Sunpreet Jassal, Stephen Hitchner. Conceptual Architecture of Firefox.
Alan Grosskurth and Michael Godfrey. A case study in architectural analysis: The evolution of the modern web browser.
主流瀏覽器內(nèi)核介紹（前端開發(fā)值得了解的瀏覽器內(nèi)核歷史）
朱永盛. 《WebKit技術(shù)內(nèi)幕》.
瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘
Alan Grosskurth, Michael W.Godfrey. A Reference Architecture for Web Browsers.
其他思考
將 CSS 放頭部，JS 放底部，這樣可以提高頁面的性能？為什么呢？
參考 ：https://mp.weixin.qq.com/s/xUUxYs_iFyKg6z4RrtcjVg
1、js 阻塞 DOM 解析和渲染
為了瀏覽器少白干活。
2、CSS 不會(huì)阻塞 DOM 的解析，阻塞頁面渲染。
瀏覽器是解析 DOM 生成 DOM Tree，結(jié)合 CSS 生成的 CSS Tree，最終組成 render tree，再渲染頁面。可見 css 并不影響 com tree 的生成。但是到了渲染階段，渲染是有成本的，瀏覽器會(huì)盡量減少渲染的次數(shù)。
