番外篇：一篇讀懂瀏覽器結構

瀏覽器結構

瀏覽器的主要組件：

一、用戶界面：包括地址欄、前進/後退按鈕，書籤菜單等。除了瀏覽器主窗口用於顯示 網頁外，其餘顯示的部分屬於用戶界面。

二、瀏覽器引擎：在用戶界面和渲染引擎直接傳送指令。一方面提供對渲染引擎的高級接口，另外一方面提供初始化加載URL和其餘用戶界面的方法，如刷新後退等 和用戶界面提供錯誤、加載進度等消息。

三、呈現引擎(渲染引擎)：通常稱爲「瀏覽器內核」，負責顯示請求的內容。若是請求的內容是HTML，則負責解析HTML和CSS內容並顯示 在屏幕上。其中不用瀏覽器的渲染引擎存在差別。例如IE使用Trident，Firefox使用的Mozilla公司「自制」的Gecko 渲染引擎，而Safari、Opera和Chrome瀏覽器則使用的是Webkit，一種開放源代碼呈現引擎。

四、網絡：基於互聯網HTTP和FTP協議，用於處理網絡請求，其提供接口用於爲全部平臺提供底層實現。

五、用戶界面後端：用戶彙總基本的窗口小部件，如組合框和窗口。

六、JavaScript解析器：用於解析和執行JavaScript代碼，並將結果傳遞到渲染引擎展現。其中 Chrome的JS解析器爲基於C++的V8引擎，Firfox的是基於C的Spider-Monkey，而IE的有JScript和VBScript。

七、數據存儲：數據持久化。瀏覽器須要在硬盤上保存各類數據，例如Cookie等。

現在基本上瀏覽器的每一個標籤頁都分別對應一個渲染引擎實例。即每一個標籤頁除了屬於同一站點(即協議和根域名相同) 都有一個獨立的渲染進程。

可是若是頁面存在多個iframe來自不一樣站點，會致使不一樣站點中的內容經過iframe同時運行在一個渲染進程中，致使 幽靈和熔燬的漏洞，因此經過支持站點隔離實現將標籤級的渲染進程重構爲iframe級的渲染進程，按照同一站點 的策略來分配渲染進程。

瀏覽器內核

瀏覽器的核心部分就是渲染引擎，其中有以下的常駐線程：

• GUI渲染線程：負責解析HTML，CSS，構建DOM樹及頁面佈局和繪製等。

• JavaScript引擎線程：負責解析JavaScript腳本，運行代碼，一個渲染進程中只有一個 JavaScript線程在運行，因此會存在JS阻塞，另外，GUI渲染線程和JS引擎是互斥的，由於 JavaScript可經過操做DOM修改元素，因此當JavaScript執行時，GUI線程會掛起，這種狀況會致使 頁面渲染阻塞，頁面渲染不連貫。

• 事件觸發線程：負責維護事件隊列，當一些事件被觸發時，該線程會把事件添加至事件隊列的末尾，等待JS引擎處理。

• 定時器線程：瀏覽器定時器會經過單獨的線程來計時並觸發定時任務。

• 異步http請求線程：在XMLHttpRequest在鏈接後是經過瀏覽器新開一個線程來實現，經過監聽鏈接 狀態的變化來將回調放入事件隊列中。

瀏覽器內部工做原理

渲染一個頁面，瀏覽器內部的工做原理：

• 瀏覽器進程：主要負責界面顯示、用戶交互、子進程管理，同時提供存儲等功能。

• 渲染進程：核心任務是將 HTML、CSS 和 JavaScript 轉換爲用戶能夠與之交互的網頁。

• GPU進程：3D CSS效果，UI界面繪製。

• 網絡進程：主要負責頁面的網絡資源加載。

• 插件進程：負責插件的運行環境。

推薦閱讀

瀏覽器的高級結構：http://taligarsiel.com/Projects/howbrowserswork1.htm#Thebrowserhighlevelstructure

一文看透瀏覽器架構：https://www.jianshu.com/p/a37990edd38a

chrome打開一個頁面須要多少進程？：https://mp.weixin.qq.com/s?__biz=MzU4ODU0NjcyOQ==&mid=2247483727&idx=1&sn=d55242b1921817adab4e3e6e09ac2dfd&chksm=fdda5689caaddf9fe9f6d36038852d9ebf7afdfa387ad9064a7b121eeef57e79ec6a6f9a3c0b&token=227086575&lang=zh_CN#rd