原文:https://developers.google.com/web/updates/2018/09/inside-browser-part1#cpu
瀏覽器的核心是CPU和GPU
CPU
Central Processing Unit -- 中央處理器
一個cpu可以看成是計(jì)算機(jī)的大腦。一個cpu內(nèi)核鸠儿,可以想象成一個辦公室工作人員,可以處理一個接一個的工作。過去,大多數(shù)的cpu都是單芯片〈迳現(xiàn)代硬件中懦冰,通常會有多內(nèi)核丛肮,為手機(jī)和電腦提供強(qiáng)大的計(jì)算能力。

GPU
Graphics Processing Unit - 圖形處理器涡驮,顯卡暗甥。
cpu擅長同時(shí)處理跨內(nèi)核的第一個簡單任務(wù)。顧名思義捉捅,它是為處理圖形而開發(fā)的撤防。

計(jì)算機(jī)的三層架構(gòu):機(jī)器硬件在最底層,操作系統(tǒng)在中間棒口,應(yīng)用在最上面寄月。

在進(jìn)程和線程上執(zhí)行程序
進(jìn)程可以看作應(yīng)用的執(zhí)行程序辜膝。線程是存在于進(jìn)程里面,并且可以執(zhí)行進(jìn)程的任一部分程序漾肮。

當(dāng)我們啟動一個應(yīng)用的時(shí)候厂抖,就會創(chuàng)建一個進(jìn)程。程序可能會創(chuàng)建多個線程去幫助其工作克懊,當(dāng)然這是可選的忱辅。操作系統(tǒng)會給進(jìn)程分配內(nèi)存塊,應(yīng)用程序的所有狀態(tài)都可以保存在該私有空間谭溉。當(dāng)關(guān)閉程序的時(shí)候墙懂,進(jìn)程會消失并且操作系統(tǒng)也會釋放內(nèi)存。
[圖片上傳失敗...(image-79f93e-1614521883417)]
一個進(jìn)程可以向操作系統(tǒng)申請另外一個進(jìn)程來執(zhí)行不同的任務(wù)扮念,操作系統(tǒng)將為新進(jìn)程分配另外一部分內(nèi)存损搬。如果兩個進(jìn)程想要通信,他們需要使用 Inter Process Communication (進(jìn)程間通信)柜与。很多應(yīng)用都是以這種方式 工作的巧勤,如果一個進(jìn)程無響應(yīng),可以直接重啟該進(jìn)程弄匕,而不需要停止執(zhí)行應(yīng)用程序其他部分的進(jìn)程颅悉。
[圖片上傳失敗...(image-314f39-1614521883417)]
瀏覽器架構(gòu)
目前沒有關(guān)于如何構(gòu)建網(wǎng)頁瀏覽器的標(biāo)準(zhǔn)規(guī)范,因此一個瀏覽器的實(shí)現(xiàn)方法和另外一個可能完全不同粘茄∏┪瑁可以是具有多個線程的一個進(jìn)程,也可以是幾個通過IPC進(jìn)行通信的多個進(jìn)程柒瓣。
我們以Chrome的架構(gòu)為例子來介紹儒搭。頂部是瀏覽器進(jìn)程,負(fù)責(zé)協(xié)調(diào)應(yīng)用程序的其他進(jìn)程芙贫。對于渲染進(jìn)程搂鲫,將會有多個并且分配給每個tab。現(xiàn)在磺平,Chrome為每個tab頁創(chuàng)建提供單獨(dú)的進(jìn)程魂仍,包括iframe。
下圖為Chrome的多進(jìn)程架構(gòu)圖拣挪。在渲染進(jìn)程下有多個圖層擦酌,它表示為每個tab頁運(yùn)行了多個渲染進(jìn)程。

每個進(jìn)程控制什么菠劝?
Browser Process | 地址欄赊舶、書簽、前進(jìn)、后退按鈕笼平。還處理一些不可見的特殊部分园骆,比如網(wǎng)絡(luò)請求和文件訪問。 |
---|---|
Renderer Process | 控制標(biāo)簽里面展示的所有內(nèi)容寓调。 |
Plugin Process | 控制網(wǎng)站的所有插件锌唾,比如flash |
GPU Process | 處理與其他進(jìn)程隔離的GPU任務(wù)。 |
不同進(jìn)程指向?yàn)g覽器UI界面的不同部分:

還有更多的進(jìn)程夺英,比如擴(kuò)展進(jìn)程和實(shí)用進(jìn)程晌涕。我們點(diǎn)擊瀏覽器右上角的三個點(diǎn),選擇“更多工具” -> "任務(wù)管理器"秋麸,它列出了當(dāng)前正在運(yùn)行的進(jìn)程和占用的cpu/內(nèi)存量渐排。如下:


Chrome多進(jìn)程架構(gòu)的優(yōu)勢
- 每個tab頁擁有自己進(jìn)程炬太,頁面無響應(yīng)之后不會影響其他的tab灸蟆。
- 為了安全性和沙箱隔離。由于操作系統(tǒng)提供了一種限制進(jìn)程權(quán)限的方法亲族,瀏覽器可以對一些確定的功能進(jìn)行精確的沙箱處理炒考。例如,chrome瀏覽器嚴(yán)格限制了任意用戶輸入訪問任意文件的進(jìn)程霎迫。
[圖片上傳失敗...(image-ccb7a6-1614521883417)]
由于進(jìn)程有自己私有的內(nèi)存空間斋枢,通常包含通用結(jié)構(gòu)的備份。這意味著更多的內(nèi)存占用知给,因?yàn)樗麄儾皇峭贿M(jìn)程的多個線程瓤帚,因此無法共享。為了節(jié)省內(nèi)存涩赢,chrome限制可啟動的進(jìn)程個數(shù)戈次,限制數(shù)量根據(jù)當(dāng)前設(shè)備內(nèi)存和cpu動態(tài)確定,但是當(dāng)觸發(fā)這個限制之后筒扒,將會對同一站點(diǎn)的多個tab頁在一個進(jìn)程中運(yùn)行怯邪。
節(jié)省內(nèi)存 - chrome的服務(wù)化
同樣的方式適用于瀏覽器進(jìn)程。Chrome正在進(jìn)行架構(gòu)調(diào)整花墩,將瀏覽器的程序每個程序部分作為一個服務(wù)運(yùn)行悬秉,可以將不同的進(jìn)程進(jìn)行拆分和合并。
一般的想法是冰蘑,當(dāng)Chrome在強(qiáng)大的硬件上運(yùn)行的時(shí)候和泌,為了穩(wěn)定性它會將每個服務(wù)拆分到不同的進(jìn)程,但是如果在一個資源有限的設(shè)備上祠肥,為了節(jié)省內(nèi)存Chrome會將服務(wù)合并到一個進(jìn)程武氓。在次更改之前,安卓平臺已經(jīng)使用類似的方法為了減少內(nèi)存使用合并了多個進(jìn)程。
[圖片上傳失敗...(image-33c86d-1614521883417)]
獨(dú)立渲染進(jìn)程 - 站點(diǎn)隔離
站點(diǎn)隔離是Chrome最新引入的功能聋丝,可以為每個iframe運(yùn)行單獨(dú)的渲染進(jìn)程索烹。我們一直在討論每個tab頁都有一個獨(dú)立的渲染進(jìn)程,它允許跨站點(diǎn)的iframe在一個渲染進(jìn)程中運(yùn)行弱睦,并且在不同的站點(diǎn)共享內(nèi)存空間百姓。在一個渲染進(jìn)程中運(yùn)行 a.com 和 b.com 看起來沒有問題。同源策略是web的核心安全模型况木,它確保一個網(wǎng)站在未經(jīng)同一的情況下訪問其他站點(diǎn)的數(shù)據(jù)垒拢,繞過此策略是安全攻擊的主要目標(biāo)。進(jìn)程隔離是分離站點(diǎn)最有效的方法火惊。因?yàn)閙eltdown和spectre這兩個經(jīng)典漏洞求类,我們需要使用進(jìn)程隔離站點(diǎn)變得更加明顯。從Chrome 67版本以來默認(rèn)啟用站點(diǎn)隔離屹耐,每個跨站點(diǎn)的iframe會有一個獨(dú)立的渲染進(jìn)程尸疆。

啟用站點(diǎn)隔離是一項(xiàng)多年工程積累的成果。站點(diǎn)隔離并不像分配不同渲染進(jìn)程那么簡單惶岭,它從根本上改變了iframe的通信方式寿弱。在不同進(jìn)程運(yùn)行的iframe頁面上打開devtools意味著devtools必須實(shí)現(xiàn)后臺的通信功能才能讓它們看起來是無縫的。就算在頁面上使用 ctrl + f 搜索也意味著在不同渲染進(jìn)程間查找按灶。這就是瀏覽器工程師將站點(diǎn)隔離功能的發(fā)布當(dāng)作一個主要里程碑的原因症革。
總結(jié)
在這篇文章中,我們涵蓋了瀏覽器的高級視圖和多進(jìn)程架構(gòu)的優(yōu)勢鸯旁。我們頁介紹了與多進(jìn)程架構(gòu)密切相關(guān)的服務(wù)化和站點(diǎn)隔離噪矛。在下一篇中,我們將深入研究這些進(jìn)程和線程為了展示網(wǎng)站發(fā)生了什么铺罢。