一文帶你看透 Chrome 瀏覽器架構(gòu)
背景
市面上的瀏覽器很多,很多很多,多到數(shù)不過來。不過目前 Chrome 瀏覽器還是占了主導(dǎo)地位,至少在開發(fā)人員眼里 Chrome 的地位很高。這篇文章來說說 Chrome 瀏覽器的架構(gòu),漫談漫談~
抽象架構(gòu)瀏覽器的主要功能就是向服務(wù)器發(fā)出請(qǐng)求,在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源,這里所說的資源一般是指 HTML 文檔,也可以是 PDF、圖片或其他的類型。大體上,瀏覽器可以分為五部分,如下圖:

- 用戶界面(地址欄、前進(jìn)/后退按鈕、書簽菜單等)
- 瀏覽器引擎(在用戶界面和渲染引擎之間傳送指令)
- 渲染引擎(解析 HTML、CSS和JS并呈現(xiàn)頁面)
- 后端服務(wù)層(網(wǎng)絡(luò)、數(shù)據(jù)存儲(chǔ)如Cookie、Storage等)
- 特別服務(wù)層(記住密碼、暗黑模式等)
這個(gè)圖還是比較清晰的,首先用戶界面,主要負(fù)責(zé)展示頁面中,除了 page 本身的內(nèi)容,我們可以粗略地理解為打開一個(gè)空頁面的時(shí)候呈現(xiàn)的界面就是瀏覽器的用戶界面(GUI)。
瀏覽器引擎,這里個(gè)人認(rèn)為主要指的是在用戶界面和渲染引擎之間傳遞指令,以及調(diào)度瀏覽器各方面的資源,協(xié)調(diào)為呈現(xiàn)頁面、完成用戶指令而工作。
呈現(xiàn)引擎,按圖中看,包含了一個(gè) compositor(合成器)和 Javascript Engine(JS解釋引擎)。分別是負(fù)責(zé)解析 HTML 和 CSS 內(nèi)容,并將解析后的內(nèi)容顯示在屏幕上 和 用于解析和執(zhí)行 JavaScript 代碼。
后端服務(wù)層,這里包含了一些后端服務(wù)。比如網(wǎng)絡(luò)請(qǐng)求層(network)、數(shù)據(jù)存儲(chǔ),瀏覽器需要在硬盤上保存各種數(shù)據(jù),例如 Cookie、Storage等。
特別服務(wù)層,這里主要指的是一些瀏覽器自帶的服務(wù),比如你填完某個(gè)網(wǎng)站的賬號(hào)密碼,瀏覽器可以幫你記住賬號(hào)密碼,又比如開啟瀏覽器的暗黑模式等特殊的服務(wù)。
以上,對(duì)前端來說,比較重要的是渲染引擎(一些文章也叫瀏覽器引擎)。我們可以看看都有哪些渲染引擎的內(nèi)核。
渲染引擎內(nèi)核介紹這里主要列一些市面上主流的瀏覽器其對(duì)應(yīng)的內(nèi)核:
- Chrome: Blink
- Safari: WebKit
- Firefox: Gecko, Servo (part of Quantum)
- IE: Trident
- Edge: EdgeHTML, Blink
Webkit2:2010年隨OS X Lion?起?世。
Blink:基于Webkit2分?,13年?歌開始作為Chrome 28的引擎集成在Chromium瀏覽器?。Android的WebView同樣基于Webkit2,是現(xiàn)在對(duì)新特性支持度最好的內(nèi)核。
3)移動(dòng)端基本上全部是 Webkit 或 Blink 內(nèi)核(除去 Android 上騰訊家的 X5),這兩個(gè)內(nèi)核對(duì)新特性的支持度較高,所以新特性可以在移動(dòng)端大展身手。
4)Servo的開發(fā)是為了充分利用多核的計(jì)算能力,用過 Chrome的人都知道,經(jīng)常 Flash 奔潰,或者越用感覺越遲鈍。Servo 就是想解決這個(gè)問題。Firefox是在16年的時(shí)候重寫的,重寫之后的一些頁面舊代碼可能出現(xiàn)兼容性問題。
5)Trident 是 IE4+ 的內(nèi)核,一直持續(xù)到 IE11,EdgeHTML 是微軟拋棄 IE 后開發(fā)的全新內(nèi)核
渲染引擎工作流程渲染引擎的主要工作都是以HTML/JavaScript/CSS等文件作為輸入,以可視化內(nèi)容作為輸出。不同的渲染引擎,主要在一些css的支持性上和渲染表現(xiàn)上不同。

- 渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂DOM 樹結(jié)構(gòu)。
- 渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets,計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
- 創(chuàng)建布局樹,并計(jì)算元素的布局信息。
- 對(duì)布局樹進(jìn)行分層,并生成分層樹。
- 為每個(gè)圖層生成繪制列表,并將其提交到合成線程。合成線程將圖層分圖塊,并柵格化將圖塊轉(zhuǎn)換成位圖。
- 合成線程發(fā)送繪制圖塊命令給瀏覽器進(jìn)程。瀏覽器進(jìn)程根據(jù)指令生成頁面,并顯示到顯示器上。
早期的web瀏覽器是單線程的,發(fā)生???為不當(dāng)、瀏覽器錯(cuò)誤、瀏覽器插件等錯(cuò)誤都會(huì)引起整個(gè)瀏覽器或當(dāng)前運(yùn) ?的選項(xiàng)卡關(guān)閉。因此Chrome將chromium應(yīng)?程序放在相互隔離的獨(dú)?的進(jìn)程。
我們可以,重啟瀏覽器,打開一個(gè)隱身窗口。這個(gè)時(shí)候,點(diǎn)擊 Chrome 瀏覽器右上角的“選項(xiàng)”菜單,選擇“更多工具”子菜單,點(diǎn)擊“任務(wù)管理器”,打開 Chrome 的任務(wù)管理器的窗口,然后看看都開了哪些進(jìn)程。比如下圖:

由這圖,可以看出瀏覽器從關(guān)閉狀態(tài)進(jìn)行啟動(dòng),然后新開 1 個(gè)頁面至少需要 1 個(gè)網(wǎng)絡(luò)進(jìn)程、1 個(gè)瀏覽器進(jìn)程、1 個(gè) GPU 進(jìn)程以及 1 個(gè)渲染進(jìn)程,共 4 個(gè)進(jìn)程。
后續(xù)再新開標(biāo)簽頁,瀏覽器、網(wǎng)絡(luò)進(jìn)程、GPU進(jìn)程是共享的,不會(huì)重新啟動(dòng),如果2個(gè)頁面屬于同一站點(diǎn)的話,并且從a頁面中打開的b頁面,那么他們也會(huì)共用一個(gè)渲染進(jìn)程,否則新開一個(gè)渲染進(jìn)程。
多進(jìn)程架構(gòu)示意圖
- 瀏覽器進(jìn)程:主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理,同時(shí)提供存儲(chǔ)等功能。
- 網(wǎng)絡(luò)進(jìn)程:主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源加載,之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程里面的,直至最近才獨(dú)立出來,成為一個(gè)單獨(dú)的進(jìn)程。
- 渲染進(jìn)程:核心任務(wù)是將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁,排版引擎 Blink 和 JavaScript 引擎 V8 都是運(yùn)行在該進(jìn)程中,默認(rèn)情況下,Chrome 會(huì)為每個(gè) Tab 標(biāo)簽創(chuàng)建一個(gè)渲染進(jìn)程。出于安全考慮,渲染進(jìn)程都是運(yùn)行在沙箱模式下。
- GPU 進(jìn)程:其實(shí),Chrome 剛開始發(fā)布的時(shí)候是沒有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS/WebGl 的效果,只是隨后網(wǎng)頁、Chrome 的 UI 界面都選擇采用 GPU 來繪制,這使得 GPU 成為瀏覽器普遍的需求。最后,Chrome 在其多進(jìn)程架構(gòu)上也引入了 GPU 進(jìn)程。
- 插件進(jìn)程:主要是負(fù)責(zé)插件的運(yùn)行,因插件易崩潰,所以需要通過插件進(jìn)程來隔離,以保證插件進(jìn)程崩潰不會(huì)對(duì)瀏覽器和頁面造成影響。
- 其他進(jìn)程:如上圖中所示的實(shí)?程序?絡(luò)服務(wù)、輔助框架等

- 防止?個(gè)??崩潰影響整個(gè)瀏覽器
- 安全性和沙盒,由于操作系統(tǒng)提供了限制進(jìn)程權(quán)限的方法,因此瀏覽器可以從某些功能中,對(duì)某些進(jìn)程進(jìn)行沙箱處理。例如,Chrome 瀏覽器可以對(duì)處理用戶輸入(如渲染器)的進(jìn)程,限制其文件訪問的權(quán)限。
- 進(jìn)程有??的私有內(nèi)存空間,可以擁有更多的內(nèi)存。

- 給每個(gè)進(jìn)程分配了單獨(dú)的內(nèi)存,盡管Chrome本身有一些優(yōu)化策略,比如為了節(jié)省內(nèi)存,Chrome限制了它可以啟動(dòng)的進(jìn)程數(shù)量。限制因設(shè)備的內(nèi)存和CPU功率?異,但當(dāng)Chrome達(dá)到限制時(shí),它會(huì)在?個(gè)進(jìn)程中開始從同?站點(diǎn)運(yùn)?多個(gè)選項(xiàng)卡。
- 有更高的資源占用。因?yàn)槊總€(gè)進(jìn)程都會(huì)包含公共基礎(chǔ)結(jié)構(gòu)的副本(如 JavaScript 運(yùn)行環(huán)境),這就意味著瀏覽器會(huì)消耗更多的內(nèi)存資源。
Chrome 正在進(jìn)行體系結(jié)構(gòu)更改,以便將瀏覽器程序的每個(gè)部分,作為一項(xiàng)服務(wù)運(yùn)行,從而可以輕松拆分為不同的流程或匯總為同一個(gè)流程。
這樣可以做到,當(dāng) Chrome 在強(qiáng)大的硬件上運(yùn)行時(shí),它可能會(huì)將每個(gè)服務(wù)拆分為不同的進(jìn)程,從而提供更高的穩(wěn)定性,但如果它位于資源約束的設(shè)備上,Chrome 會(huì)將服務(wù)整合到一個(gè)進(jìn)程中,從而整合流程以減少內(nèi)存使用。

本文介紹了現(xiàn)在瀏覽器不同角度下的架構(gòu)劃分,很清晰明了。也描繪了Chrome未來的架構(gòu)發(fā)展,讓我一起期待未來更好用的瀏覽器吧~
參考資料- 極客時(shí)間《瀏覽器工作原理與實(shí)踐》
- http://chuquan.me/2018/01/21/browser-architecture-overview/
- https://toutiao.io/posts/uozd28/preview
推薦閱讀
我的公眾號(hào)能帶來什么價(jià)值?(文末有送書規(guī)則,一定要看)
每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)(長(zhǎng)文建議收藏)
為什么現(xiàn)在面試總是面試造火箭?
在看點(diǎn)這里
