【譯】深入了解現(xiàn)代web瀏覽器(一)CPU,GPU,內(nèi)存和多進(jìn)程架構(gòu)

原文: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ì)算能力。

cpu.png
cpu.png

GPU

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

gpu.png
gpu.png

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


cpu.png
cpu.png

在進(jìn)程和線程上執(zhí)行程序

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


process.png
process.png

當(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)程。


browser-art.png
browser-art.png

每個進(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界面的不同部分:


browser-1.png
browser-1.png

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

browser-3.png
browser-3.png
browser-2.png
browser-2.png

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)程尸疆。

site.png
site.png

啟用站點(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ā)生了什么铺罢。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末艇挨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子畏铆,更是在濱河造成了極大的恐慌雷袋,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辞居,死亡現(xiàn)場離奇詭異楷怒,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)瓦灶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進(jìn)店門鸠删,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人贼陶,你說我怎么就攤上這事刃泡∏捎椋” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵烘贴,是天一觀的道長禁添。 經(jīng)常有香客問我,道長桨踪,這世上最難降的妖魔是什么老翘? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮锻离,結(jié)果婚禮上铺峭,老公的妹妹穿的比我還像新娘。我一直安慰自己汽纠,他們只是感情好卫键,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著虱朵,像睡著了一般莉炉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上卧秘,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天呢袱,我揣著相機(jī)與錄音,去河邊找鬼翅敌。 笑死,一個胖子當(dāng)著我的面吹牛惕蹄,可吹牛的內(nèi)容都是我干的蚯涮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼卖陵,長吁一口氣:“原來是場噩夢啊……” “哼遭顶!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起泪蔫,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤棒旗,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后撩荣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铣揉,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年餐曹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了逛拱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡台猴,死狀恐怖朽合,靈堂內(nèi)的尸體忽然破棺而出俱两,到底是詐尸還是另有隱情,我是刑警寧澤曹步,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布宪彩,位于F島的核電站,受9級特大地震影響讲婚,放射性物質(zhì)發(fā)生泄漏毯焕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一磺樱、第九天 我趴在偏房一處隱蔽的房頂上張望纳猫。 院中可真熱鬧玻驻,春花似錦屯伞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侵续。三九已至,卻和暖如春憨闰,著一層夾襖步出監(jiān)牢的瞬間状蜗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工鹉动, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留轧坎,地道東北人。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓泽示,卻偏偏與公主長得像缸血,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子械筛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內(nèi)容