一文帶你看透 Chrome 瀏覽器架構(gòu)

背景

市面上的瀏覽器很多，很多很多，多到數(shù)不過(guò)來(lái)。不過(guò)目前 Chrome 瀏覽器還是占了主導(dǎo)地位，至少在開(kāi)發(fā)人員眼里 Chrome 的地位很高。這篇文章來(lái)說(shuō)說(shuō) Chrome 瀏覽器的架構(gòu)，漫談漫談～

抽象架構(gòu)

瀏覽器的主要功能就是向服務(wù)器發(fā)出請(qǐng)求，在瀏覽器窗口中展示您選擇的網(wǎng)絡(luò)資源，這里所說(shuō)的資源一般是指 HTML 文檔，也可以是 PDF、圖片或其他的類型。大體上，瀏覽器可以分為五部分，如下圖：

如圖所示，主要可以分為：

• 用戶界面(地址欄、前進(jìn)/后退按鈕、書(shū)簽菜單等)
• 瀏覽器引擎(在用戶界面和渲染引擎之間傳送指令)
• 渲染引擎(解析 HTML、CSS和JS并呈現(xiàn)頁(yè)面)
• 后端服務(wù)層(網(wǎng)絡(luò)、數(shù)據(jù)存儲(chǔ)如Cookie、Storage等)
• 特別服務(wù)層(記住密碼、暗黑模式等)

這個(gè)圖還是比較清晰的，首先用戶界面，主要負(fù)責(zé)展示頁(yè)面中，除了 page 本身的內(nèi)容，我們可以粗略地理解為打開(kāi)一個(gè)空頁(yè)面的時(shí)候呈現(xiàn)的界面就是瀏覽器的用戶界面(GUI)。

瀏覽器引擎，這里個(gè)人認(rèn)為主要指的是在用戶界面和渲染引擎之間傳遞指令，以及調(diào)度瀏覽器各方面的資源，協(xié)調(diào)為呈現(xiàn)頁(yè)面、完成用戶指令而工作。

呈現(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)密碼，又比如開(kāi)啟瀏覽器的暗黑模式等特殊的服務(wù)。

以上，對(duì)前端來(lái)說(shuō)，比較重要的是渲染引擎(一些文章也叫瀏覽器引擎)。我們可以看看都有哪些渲染引擎的內(nèi)核。

渲染引擎內(nèi)核介紹

這里主要列一些市面上主流的瀏覽器其對(duì)應(yīng)的內(nèi)核：

• Chrome: Blink
• Safari: WebKit
• Firefox: Gecko, Servo (part of Quantum)
• IE: Trident
• Edge: EdgeHTML, Blink

1. Webkit2：2010年隨OS X Lion?起?世。

2. Blink：基于Webkit2分?，13年?歌開(kāi)始作為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的開(kāi)發(fā)是為了充分利用多核的計(jì)算能力，用過(guò) Chrome的人都知道，經(jīng)常 Flash 奔潰，或者越用感覺(jué)越遲鈍。Servo 就是想解決這個(gè)問(wèn)題。Firefox是在16年的時(shí)候重寫(xiě)的，重寫(xiě)之后的一些頁(yè)面舊代碼可能出現(xiàn)兼容性問(wèn)題。

5）Trident 是 IE4+ 的內(nèi)核，一直持續(xù)到 IE11，EdgeHTML 是微軟拋棄 IE 后開(kāi)發(fā)的全新內(nèi)核

渲染引擎工作流程

渲染引擎的主要工作都是以HTML/JavaScript/CSS等文件作為輸入，以可視化內(nèi)容作為輸出。不同的渲染引擎，主要在一些css的支持性上和渲染表現(xiàn)上不同。

1. 渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂DOM 樹(shù)結(jié)構(gòu)。
2. 渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
3. 創(chuàng)建布局樹(shù)，并計(jì)算元素的布局信息。
4. 對(duì)布局樹(shù)進(jìn)行分層，并生成分層樹(shù)。
5. 為每個(gè)圖層生成繪制列表，并將其提交到合成線程。合成線程將圖層分圖塊，并柵格化將圖塊轉(zhuǎn)換成位圖。
6. 合成線程發(fā)送繪制圖塊命令給瀏覽器進(jìn)程。瀏覽器進(jìn)程根據(jù)指令生成頁(yè)面，并顯示到顯示器上。

瀏覽器多進(jìn)程架構(gòu)介紹

早期的web瀏覽器是單線程的，發(fā)生???為不當(dāng)、瀏覽器錯(cuò)誤、瀏覽器插件等錯(cuò)誤都會(huì)引起整個(gè)瀏覽器或當(dāng)前運(yùn) ?的選項(xiàng)卡關(guān)閉。因此Chrome將chromium應(yīng)?程序放在相互隔離的獨(dú)?的進(jìn)程。

我們可以，重啟瀏覽器，打開(kāi)一個(gè)隱身窗口。這個(gè)時(shí)候，點(diǎn)擊 Chrome 瀏覽器右上角的“選項(xiàng)”菜單，選擇“更多工具”子菜單，點(diǎn)擊“任務(wù)管理器”，打開(kāi) Chrome 的任務(wù)管理器的窗口，然后看看都開(kāi)了哪些進(jìn)程。比如下圖：

由這圖，可以看出瀏覽器從關(guān)閉狀態(tài)進(jìn)行啟動(dòng)，然后新開(kāi) 1 個(gè)頁(yè)面至少需要 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ù)再新開(kāi)標(biāo)簽頁(yè)，瀏覽器、網(wǎng)絡(luò)進(jìn)程、GPU進(jìn)程是共享的，不會(huì)重新啟動(dòng)，如果2個(gè)頁(yè)面屬于同一站點(diǎn)的話，并且從a頁(yè)面中打開(kāi)的b頁(yè)面，那么他們也會(huì)共用一個(gè)渲染進(jìn)程，否則新開(kāi)一個(gè)渲染進(jìn)程。

多進(jìn)程架構(gòu)示意圖

• 瀏覽器進(jìn)程：主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理，同時(shí)提供存儲(chǔ)等功能。
• 網(wǎng)絡(luò)進(jìn)程：主要負(fù)責(zé)頁(yè)面的網(wǎng)絡(luò)資源加載，之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程里面的，直至最近才獨(dú)立出來(lái)，成為一個(gè)單獨(dú)的進(jìn)程。
• 渲染進(jìn)程：核心任務(wù)是將 HTML、CSS 和 JavaScript 轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁(yè)，排版引擎 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 剛開(kāi)始發(fā)布的時(shí)候是沒(méi)有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS/WebGl 的效果，只是隨后網(wǎng)頁(yè)、Chrome 的 UI 界面都選擇采用 GPU 來(lái)繪制，這使得 GPU 成為瀏覽器普遍的需求。最后，Chrome 在其多進(jìn)程架構(gòu)上也引入了 GPU 進(jìn)程。
• 插件進(jìn)程：主要是負(fù)責(zé)插件的運(yùn)行，因插件易崩潰，所以需要通過(guò)插件進(jìn)程來(lái)隔離，以保證插件進(jìn)程崩潰不會(huì)對(duì)瀏覽器和頁(yè)面造成影響。
• 其他進(jìn)程：如上圖中所示的實(shí)?程序?絡(luò)服務(wù)、輔助框架等

多進(jìn)程架構(gòu)優(yōu)勢(shì)

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

多進(jìn)程架構(gòu)問(wèn)題

• 給每個(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)程中開(kāi)始從同?站點(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)存資源。

瀏覽器未來(lái)架構(gòu)

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)存使用。

這樣，原來(lái)的各種模塊會(huì)被重構(gòu)成獨(dú)立的服務(wù)（Service），每個(gè)服務(wù)（Service）都可以在獨(dú)立的進(jìn)程中運(yùn)行，訪問(wèn)服務(wù)（Service）必須使用定義好的接口，通過(guò) IPC 來(lái)通信，從而構(gòu)建一個(gè)更內(nèi)聚、松耦合、易于維護(hù)和擴(kuò)展的系統(tǒng)，更好實(shí)現(xiàn) Chrome 簡(jiǎn)單、穩(wěn)定、高速、安全的目標(biāo)。總結(jié)

本文介紹了現(xiàn)在瀏覽器不同角度下的架構(gòu)劃分，很清晰明了。也描繪了Chrome未來(lái)的架構(gòu)發(fā)展，讓我一起期待未來(lái)更好用的瀏覽器吧～

參考資料

• 極客時(shí)間《瀏覽器工作原理與實(shí)踐》
• http://chuquan.me/2018/01/21/browser-architecture-overview/
• https://toutiao.io/posts/uozd28/preview

推薦閱讀

我的公眾號(hào)能帶來(lái)什么價(jià)值？(文末有送書(shū)規(guī)則，一定要看)

每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)(長(zhǎng)文建議收藏)

為什么現(xiàn)在面試總是面試造火箭？

在看點(diǎn)這里