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

NO IMAGE

我的博客

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

背景

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

抽象架構

瀏覽器的主要功能就是向服務器發出請求,在瀏覽器窗口中展示您選擇的網絡資源,這裡所說的資源一般是指 HTML 文檔,也可以是 PDF、圖片或其他的類型。大體上,瀏覽器可以分為五部分,如下圖:

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

如圖所示,主要可以分為:

  • 用戶界面(地址欄、前進/後退按鈕、書籤菜單等)
  • 瀏覽器引擎(在用戶界面和渲染引擎之間傳送指令)
  • 渲染引擎(解析 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的支持性上和渲染表現上不同。

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

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

瀏覽器多進程架構介紹

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

我們可以,重啟瀏覽器,打開一個隱身窗口。這個時候,點擊 Chrome 瀏覽器右上角的“選項”菜單,選擇“更多工具”子菜單,點擊“任務管理器”,打開 Chrome 的任務管理器的窗口,然後看看都開了哪些進程。比如下圖:

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

由這圖,可以看出瀏覽器從關閉狀態進行啟動,然後新開 1 個頁面至少需要 1 個網絡進程、1 個瀏覽器進程、1 個 GPU 進程以及 1 個渲染進程,共 4 個進程。

後續再新開標籤頁,瀏覽器、網絡進程、GPU進程是共享的,不會重新啟動,如果2個頁面屬於同一站點的話,並且從a頁面中打開的b頁面,那麼他們也會共用一個渲染進程,否則新開一個渲染進程。

多進程架構示意圖

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

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

多進程架構優勢

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

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

多進程架構問題

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

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

瀏覽器未來架構

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

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

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

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

總結

本文介紹了現在瀏覽器不同角度下的架構劃分,很清晰明瞭。也描繪了Chrome未來的架構發展,讓我一起期待未來更好用的瀏覽器吧~

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

參考資料

最後

  • 歡迎加我微信(winty230),拉你進技術群,長期交流學習…
  • 歡迎關注「前端Q」,認真學前端,做個有專業的技術人…
一文帶你看透Chrome瀏覽器架構

相關文章

看完跳槽少說漲5K,前端面試從準備到談薪完全指南(近萬字精華)

webpack最佳配置指北

Sthabout’usestrict’

[技術翻譯]使用Nuxt生成靜態網站