一文帶你看透 Chrome 瀏覽器架構

個人博客

歡迎關注本人博客：github.com/LuckyWinty/…

背景

市面上的瀏覽器不少，不少不少，多到數不過來。不過目前 Chrome 瀏覽器仍是佔了主導地位，至少在開發人員眼裏 Chrome 的地位很高。這篇文章來講說 Chrome 瀏覽器的架構，漫談漫談～

抽象架構

瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源，這裏所說的資源通常是指 HTML 文檔，也能夠是 PDF、圖片或其餘的類型。大致上，瀏覽器能夠分爲五部分，以下圖：

如圖所示，主要能夠分爲：

• 用戶界面(地址欄、前進/後退按鈕、書籤菜單等)
• 瀏覽器引擎(在用戶界面和渲染引擎之間傳送指令)
• 渲染引擎(解析 HTML、CSS和JS並呈現頁面)
• 後端服務層(網絡、數據存儲如Cookie、Storage等)
• 特別服務層(記住密碼、暗黑模式等)

這個圖仍是比較清晰的，首先用戶界面，主要負責展現頁面中，除了 page 自己的內容，咱們能夠粗略地理解爲打開一個空頁面的時候呈現的界面就是瀏覽器的用戶界面(GUI)。

瀏覽器引擎，這裏我的認爲主要指的是在用戶界面和渲染引擎之間傳遞指令，以及調度瀏覽器各方面的資源，協調爲呈現頁面、完成用戶指令而工做。

呈現引擎，按圖中看，包含了一個 compositor(合成器)和 Javascript Engine(JS解釋引擎)。分別是負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上 和 用於解析和執行 JavaScript 代碼。

後端服務層，這裏包含了一些後端服務。好比網絡請求層(network)、數據存儲，瀏覽器須要在硬盤上保存各類數據，例如 Cookie、Storage等。

特別服務層，這裏主要指的是一些瀏覽器自帶的服務，好比你填完某個網站的帳號密碼，瀏覽器能夠幫你記住帳號密碼，又好比開啓瀏覽器的暗黑模式等特殊的服務。

以上，對前端來講，比較重要的是渲染引擎(一些文章也叫瀏覽器引擎)。咱們能夠看看都有哪些渲染引擎的內核。

渲染引擎內核介紹

這裏主要列一些市面上主流的瀏覽器其對應的內核：

• 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年⾕歌開始做爲Chrome 28的引擎集成在Chromium瀏覽器⾥。Android的WebView一樣基於Webkit2，是如今對新特性支持度最好的內核。

3）移動端基本上所有是 Webkit 或 Blink 內核（除去 Android 上騰訊家的 X5），這兩個內核對新特性的支持度較高，因此新特性能夠在移動端大展身手。

4）Servo的開發是爲了充分利用多核的計算能力，用過 Chrome的人都知道，常常 Flash 奔潰，或者越用感受越遲鈍。Servo 就是想解決這個問題。Firefox是在16年的時候重寫的，重寫以後的一些頁面舊代碼可能出現兼容性問題。

5）Trident 是 IE4+ 的內核，一直持續到 IE11，EdgeHTML 是微軟拋棄 IE 後開發的全新內核

渲染引擎工做流程

渲染引擎的主要工做都是以HTML/JavaScript/CSS等文件做爲輸入，以可視化內容做爲輸出。不一樣的渲染引擎，主要在一些css的支持性上和渲染表現上不一樣。

1. 渲染進程將 HTML 內容轉換爲可以讀懂DOM 樹結構。
2. 渲染引擎將 CSS 樣式錶轉化爲瀏覽器能夠理解的styleSheets，計算出 DOM 節點的樣式。
3. 建立佈局樹，並計算元素的佈局信息。
4. 對佈局樹進行分層，並生成分層樹。
5. 爲每一個圖層生成繪製列表，並將其提交到合成線程。合成線程將圖層分圖塊，並柵格化將圖塊轉換成位圖。
6. 合成線程發送繪製圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，並顯示到顯示器上。

瀏覽器多進程架構介紹

早期的web瀏覽器是單線程的，發生⻚⾯⾏爲不當、瀏覽器錯誤、瀏覽器插件等錯誤都會引發整個瀏覽器或當前運 ⾏的選項卡關閉。所以Chrome將chromium應⽤程序放在相互隔離的獨⽴的進程。

咱們能夠，重啓瀏覽器，打開一個隱身窗口。這個時候，點擊 Chrome 瀏覽器右上角的「選項」菜單，選擇「更多工具」子菜單，點擊「任務管理器」，打開 Chrome 的任務管理器的窗口，而後看看都開了哪些進程。好比下圖：

由這圖，能夠看出瀏覽器從關閉狀態進行啓動，而後新開 1 個頁面至少須要 1 個網絡進程、1 個瀏覽器進程、1 個 GPU 進程以及 1 個渲染進程，共 4 個進程。

後續再新開標籤頁，瀏覽器、網絡進程、GPU進程是共享的，不會從新啓動，若是2個頁面屬於同一站點的話，而且從a頁面中打開的b頁面，那麼他們也會共用一個渲染進程，不然新開一個渲染進程。

多進程架構示意圖

• 瀏覽器進程：主要負責界面顯示、用戶交互、子進程管理，同時提供存儲等功能。
• 網絡進程：主要負責頁面的網絡資源加載，以前是做爲一個模塊運行在瀏覽器進程裏面的，直至最近才獨立出來，成爲一個單獨的進程。
• 渲染進程：核心任務是將 HTML、CSS 和 JavaScript 轉換爲用戶能夠與之交互的網頁，排版引擎 Blink 和 JavaScript 引擎 V8 都是運行在該進程中，默認狀況下，Chrome 會爲每一個 Tab 標籤建立一個渲染進程。出於安全考慮，渲染進程都是運行在沙箱模式下。
• GPU 進程：其實，Chrome 剛開始發佈的時候是沒有 GPU 進程的。而 GPU 的使用初衷是爲了實現 3D CSS/WebGl 的效果，只是隨後網頁、Chrome 的 UI 界面都選擇採用 GPU 來繪製，這使得 GPU 成爲瀏覽器廣泛的需求。最後，Chrome 在其多進程架構上也引入了 GPU 進程。
• 插件進程：主要是負責插件的運行，因插件易崩潰，因此須要經過插件進程來隔離，以保證插件進程崩潰不會對瀏覽器和頁面形成影響。
• 其餘進程：如上圖中所示的實⽤程序⽹絡服務、輔助框架等

多進程架構優點

1. 防⼀個⻚⾯崩潰影響整個瀏覽器
2. 安全性和沙盒，因爲操做系統提供了限制進程權限的方法，所以瀏覽器能夠從某些功能中，對某些進程進行沙箱處理。例如，Chrome 瀏覽器能夠對處理用戶輸入（如渲染器）的進程，限制其文件訪問的權限。
3. 進程有⾃⼰的私有內存空間，能夠擁有更多的內存。

多進程架構問題

• 給每一個進程分配了單獨的內存，儘管Chrome自己有一些優化策略，好比爲了節省內存，Chrome限制了它能夠啓動的進程數量。限制因設備的內存和CPU功率⽽異，但當Chrome達到限制時，它會在⼀個進程中開始從同⼀站點運⾏多個選項卡。
• 有更高的資源佔用。由於每一個進程都會包含公共基礎結構的副本（如 JavaScript 運行環境），這就意味着瀏覽器會消耗更多的內存資源。

瀏覽器將來架構

Chrome 正在進行體系結構更改，以便將瀏覽器程序的每一個部分，做爲一項服務運行，從而能夠輕鬆拆分爲不一樣的流程或彙總爲同一個流程。

這樣能夠作到，當 Chrome 在強大的硬件上運行時，它可能會將每一個服務拆分爲不一樣的進程，從而提供更高的穩定性，但若是它位於資源約束的設備上，Chrome 會將服務整合到一個進程中，從而整合流程以減小內存使用。

這樣，原來的各類模塊會被重構成獨立的服務（Service），每一個服務（Service）均可以在獨立的進程中運行，訪問服務（Service）必須使用定義好的接口，經過 IPC 來通訊，從而構建一個更內聚、鬆耦合、易於維護和擴展的系統，更好實現 Chrome 簡單、穩定、高速、安全的目標。

總結

本文介紹瞭如今瀏覽器不一樣角度下的架構劃分，很清晰明瞭。也描繪了Chrome將來的架構發展，讓我一塊兒期待將來更好用的瀏覽器吧～

另外，歡迎關注本人博客：github.com/LuckyWinty/…

參考資料

• 極客時間《瀏覽器工做原理與實踐》
• chuquan.me/2018/01/21/…
• toutiao.io/posts/uozd2…

最後

• 歡迎加我微信(winty230)，拉你進技術羣，長期交流學習...
• 歡迎關注「前端Q」,認真學前端，作個有專業的技術人...