<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

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

          共 3379字,需瀏覽 7分鐘

           ·

          2020-01-07 23:28

          4fea2e6fd2d2082c7842f695db0408d9.webp背景

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

          抽象架構(gòu)

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

          60c6b9d41cc26108555f1820e79e4eb1.webp

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


          • 用戶界面(地址欄、前進(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
          1. Webkit2:2010年隨OS X Lion?起?世。

          2. 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)上不同。

          4f7ae9e971c43f89baf3d38c966a6acb.webp

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

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

          3a8e46b1c99a3877456c5bfe5dd84dfb.webp

          由這圖,可以看出瀏覽器從關(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)示意圖

          266a251f61b2f6d07a6359b2e2427e54.webp

          • 瀏覽器進(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ù)、輔助框架等
          多進(jìn)程架構(gòu)優(yōu)勢(shì)

          13766f697478113eb2cecb67098148cc.webp


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

          7bb86a92c9021fb3ae54079389393932.webp


          • 給每個(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)存資源。
          瀏覽器未來架構(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)存使用。

          7703678538fcd60f643ca5143ee60f4c.webp

          這樣,原來的各種模塊會(huì)被重構(gòu)成獨(dú)立的服務(wù)(Service),每個(gè)服務(wù)(Service)都可以在獨(dú)立的進(jìn)程中運(yùn)行,訪問服務(wù)(Service)必須使用定義好的接口,通過 IPC 來通信,從而構(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未來的架構(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)在面試總是面試造火箭?

          72597797bd59669989d5a023c82d327d.webp在看點(diǎn)這里543b9e5580a47d3b134755f9235fecc7.webp
          瀏覽 76
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  三级网站在线免费 | a黄色大片 | 无码操操 | 亚洲精品偷窥 | 一卡二卡高清无码 |