【译】深入了解现代web浏览器(一)CPU,GPU,内存和多进程架构

原文:https://developers.google.com/web/updates/2018/09/inside-browser-part1#cpu

浏览器的核心是CPU和GPU

CPU

Central Processing Unit -- 中央处理器
一个cpu可以看成是计算机的大脑。一个cpu内核,可以想象成一个办公室工作人员,可以处理一个接一个的工作。过去,大多数的cpu都是单芯片。现代硬件中,通常会有多内核,为手机和电脑提供强大的计算能力。

cpu.png
cpu.png

GPU

Graphics Processing Unit - 图形处理器,显卡。
cpu擅长同时处理跨内核的第一个简单任务。顾名思义,它是为处理图形而开发的。

gpu.png
gpu.png

计算机的三层架构:机器硬件在最底层,操作系统在中间,应用在最上面。


cpu.png
cpu.png

在进程和线程上执行程序

进程可以看作应用的执行程序。线程是存在于进程里面,并且可以执行进程的任一部分程序。


process.png
process.png

当我们启动一个应用的时候,就会创建一个进程。程序可能会创建多个线程去帮助其工作,当然这是可选的。操作系统会给进程分配内存块,应用程序的所有状态都可以保存在该私有空间。当关闭程序的时候,进程会消失并且操作系统也会释放内存。
[图片上传失败...(image-79f93e-1614521883417)]

一个进程可以向操作系统申请另外一个进程来执行不同的任务,操作系统将为新进程分配另外一部分内存。如果两个进程想要通信,他们需要使用 Inter Process Communication (进程间通信)。很多应用都是以这种方式 工作的,如果一个进程无响应,可以直接重启该进程,而不需要停止执行应用程序其他部分的进程。

[图片上传失败...(image-314f39-1614521883417)]

浏览器架构

目前没有关于如何构建网页浏览器的标准规范,因此一个浏览器的实现方法和另外一个可能完全不同。可以是具有多个线程的一个进程,也可以是几个通过IPC进行通信的多个进程。

我们以Chrome的架构为例子来介绍。顶部是浏览器进程,负责协调应用程序的其他进程。对于渲染进程,将会有多个并且分配给每个tab。现在,Chrome为每个tab页创建提供单独的进程,包括iframe。

下图为Chrome的多进程架构图。在渲染进程下有多个图层,它表示为每个tab页运行了多个渲染进程。


browser-art.png
browser-art.png

每个进程控制什么?

Browser Process 地址栏、书签、前进、后退按钮。还处理一些不可见的特殊部分,比如网络请求和文件访问。
Renderer Process 控制标签里面展示的所有内容。
Plugin Process 控制网站的所有插件,比如flash
GPU Process 处理与其他进程隔离的GPU任务。

不同进程指向浏览器UI界面的不同部分:


browser-1.png
browser-1.png

还有更多的进程,比如扩展进程和实用进程。我们点击浏览器右上角的三个点,选择“更多工具” -> "任务管理器",它列出了当前正在运行的进程和占用的cpu/内存量。如下:

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

Chrome多进程架构的优势

  • 每个tab页拥有自己进程,页面无响应之后不会影响其他的tab。
  • 为了安全性和沙箱隔离。由于操作系统提供了一种限制进程权限的方法,浏览器可以对一些确定的功能进行精确的沙箱处理。例如,chrome浏览器严格限制了任意用户输入访问任意文件的进程。

[图片上传失败...(image-ccb7a6-1614521883417)]

由于进程有自己私有的内存空间,通常包含通用结构的备份。这意味着更多的内存占用,因为他们不是同一进程的多个线程,因此无法共享。为了节省内存,chrome限制可启动的进程个数,限制数量根据当前设备内存和cpu动态确定,但是当触发这个限制之后,将会对同一站点的多个tab页在一个进程中运行。

节省内存 - chrome的服务化

同样的方式适用于浏览器进程。Chrome正在进行架构调整,将浏览器的程序每个程序部分作为一个服务运行,可以将不同的进程进行拆分和合并。

一般的想法是,当Chrome在强大的硬件上运行的时候,为了稳定性它会将每个服务拆分到不同的进程,但是如果在一个资源有限的设备上,为了节省内存Chrome会将服务合并到一个进程。在次更改之前,安卓平台已经使用类似的方法为了减少内存使用合并了多个进程。

[图片上传失败...(image-33c86d-1614521883417)]

独立渲染进程 - 站点隔离

站点隔离是Chrome最新引入的功能,可以为每个iframe运行单独的渲染进程。我们一直在讨论每个tab页都有一个独立的渲染进程,它允许跨站点的iframe在一个渲染进程中运行,并且在不同的站点共享内存空间。在一个渲染进程中运行 a.com 和 b.com 看起来没有问题。同源策略是web的核心安全模型,它确保一个网站在未经同一的情况下访问其他站点的数据,绕过此策略是安全攻击的主要目标。进程隔离是分离站点最有效的方法。因为meltdown和spectre这两个经典漏洞,我们需要使用进程隔离站点变得更加明显。从Chrome 67版本以来默认启用站点隔离,每个跨站点的iframe会有一个独立的渲染进程。

site.png
site.png

启用站点隔离是一项多年工程积累的成果。站点隔离并不像分配不同渲染进程那么简单,它从根本上改变了iframe的通信方式。在不同进程运行的iframe页面上打开devtools意味着devtools必须实现后台的通信功能才能让它们看起来是无缝的。就算在页面上使用 ctrl + f 搜索也意味着在不同渲染进程间查找。这就是浏览器工程师将站点隔离功能的发布当作一个主要里程碑的原因。

总结

在这篇文章中,我们涵盖了浏览器的高级视图和多进程架构的优势。我们页介绍了与多进程架构密切相关的服务化和站点隔离。在下一篇中,我们将深入研究这些进程和线程为了展示网站发生了什么。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 224,619评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,163评论 3 402
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 171,789评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,911评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,920评论 6 399
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,410评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,788评论 3 428
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,762评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,293评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,328评论 3 345
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,456评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,063评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,775评论 3 337
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,231评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,363评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,995评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,519评论 2 365

推荐阅读更多精彩内容