番外篇：一篇讀懂瀏覽器結構
瀏覽器結構
瀏覽器的主要元件：
1、使用者介面：包括位址列、前進/後退按鈕，書籤選單等。除了瀏覽器主視窗用於顯示 網頁外，其他顯示的部分屬於使用者介面。
2、瀏覽器引擎：在使用者介面和渲染引擎直接傳送指令。一方面提供對渲染引擎的高階介面，另一方面提供初始化載入URL和其他使用者介面的方法，如重新整理後退等 和使用者介面提供錯誤、載入進度等訊息。
3、呈現引擎(渲染引擎)：一般稱為“瀏覽器核心”，負責顯示請求的內容。如果請求的內容是HTML，則負責解析HTML和CSS內容並顯示 在螢幕上。其中不用瀏覽器的渲染引擎存在差異。例如IE使用Trident，Firefox使用的Mozilla公司“自制”的Gecko 渲染引擎，而Safari、Opera和Chrome瀏覽器則使用的是Webkit，一種開放原始碼呈現引擎。
4、網路：基於網際網路HTTP和FTP協議，用於處理網路請求，其提供介面用於為所有平臺提供底層實現。
5、使用者介面後端：使用者彙總基本的視窗小部件，如組合框和視窗。
6、JavaScript解析器：用於解析和執行JavaScript程式碼，並將結果傳遞到渲染引擎展示。其中 Chrome的JS解析器為基於C++的V8引擎，Firfox的是基於C的Spider-Monkey，而IE的有JScript和VBScript。
7、資料儲存：資料持久化。瀏覽器需要在硬碟上儲存各種資料，例如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
&n