深入了解现代网络浏览器(第 1 部分)

CPU 、GPU 、内存和多进程架构

在这个系列教程中,我们将深入了解 Chrome 浏览器,从高级架构到渲染过程的细节。如果您想知道浏览器如何将您的代码变成功网站,或者您不确定如何使用特定技术来提高性能,那么本系列非常适合您。

作为本系列的第 1 部分,我们将了解核心计算术语和 Chrome 的多进程架构。

计算机的核心是 CPU 和 GPU

为了了解浏览器运行的环境,我们需要了解一些计算机部件以及它们的作用。

CPU(中央处理器)

CPU可以被认为是您计算机的大脑。一个 CPU 内核,在这里被描绘成一个办公室工作人员,可以在他们进来时一个一个地处理许多不同的任务。它可以处理从数学到艺术的所有事情,同时知道如何回复客户的电话。过去,大多数 CPU 都是单芯片。内核就像另一个 CPU 生活在同一个芯片中。在现代硬件中,您通常会获得多个内核,从而为您的手机和笔记本电脑提供更多的计算能力。

image

GPU(图形处理器)

GPU是计算机的另一部分。与 CPU 不同,GPU 擅长处理简单的任务,但可以同时跨多个内核。顾名思义,它最初是为处理图形而开发的。这就是为什么在图形上下文中“使用 GPU”或“GPU 支持”与快速渲染和流畅交互相关联起来。近年来,随着 GPU 加速计算的发展,越来越多的计算在 GPU 上成为可能。

image

当您在计算机或手机上启动应用程序时,CPU 和 GPU 是应用程序的动力。通常,应用程序使用操作系统提供的机制在 CPU 和 GPU 上运行。

image

在进程和线程上执行程序

在深入研究浏览器架构之前要掌握的另一个概念是进程和线程。进程可以描述为应用程序的执行程序。线程是存在于进程内部并执行其进程程序的任何部分的线程。

当您启动应用程序时,会创建一个进程。该程序可能会创建线程来帮助它工作,但这是可选的。操作系统为进程提供了一块可使用的内存“区域”,所有应用程序状态都保存在该私有内存空间中。当您关闭应用程序时,该进程也会消失,并且操作系统会释放内存。

image

查看动画演示

一个进程可以要求操作系统启动另一个进程来运行不同的任务。发生这种情况时,将为新进程分配内存的不同部分。如果两个进程需要通信,它们可以通过使用进程间通信( IPC )来实现。许多应用程序被设计为以这种方式工作,因此如果一个工作进程没有响应,它可以在不停止运行应用程序不同部分的其他进程的情况下重新启动。

image

查看动画

浏览器架构

那么如何使用进程和线程构建 Web 浏览器呢?好吧,它可能是一个具有许多不同线程的进程,也可能是许多不同的进程,其中有几个线程通过 IPC 进行通信。

image

这里要注意的重要一点是,这些不同的架构是实现细节。没有关于如何构建 Web 浏览器的标准规范。一种浏览器的方法可能与另一种完全不同。

我们将使用下图中描述的 Chrome 的最新架构。

顶部是浏览器进程与处理应用程序不同部分的其他进程协调。对于渲染器进程,会创建多个进程并将其分配给每个选项卡。直到最近,Chrome 还在可能的情况下为每个选项卡提供了一个进程;现在它尝试为每个站点提供自己的进程,包括 iframe(请参阅站点隔离)。

image

每个进程的作用?

下表描述了每个 Chrome 进程及其控制的内容

|

浏览器进程

|

控制应用程序的“chrome”部分,包括地址栏、书签、后退和前进按钮。 还处理网络浏览器中不可见的功能,例如网络请求和文件访问。

|
|

渲染器进程

|

控制显示网站的选项卡内的任何内容。

|
|

插件进程

|

控制网站使用的任何插件,例如 Flash。

|
|

GPU(图形处理器)进程

|

与其他进程隔离处理 GPU 任务。它被分成不同的进程,因为 GPU 处理来自多个应用程序的请求并将它们绘制在同一个表面上。

|

image

还有更多进程。如果您想查看 Chrome 中正在运行的进程数量,点击浏览器 more, 选择更多工具,然后选择任务管理器。这将打开一个窗口,其中列出了当前正在运行的进程以及它们正在使用多少 CPU/内存。

Chrome 中多进程架构的好处

之前,我提到 Chrome 使用多个渲染器进程。在最简单的情况下,您可以想象每个选项卡都有自己的渲染器进程。假设您打开了 3 个选项卡,每个选项卡都由一个独立的渲染器进程运行。如果一个选项卡变得无响应,那么您可以关闭无响应的选项卡并继续前进,同时保持其他选项卡处于活动状态。如果所有选项卡都在一个进程上运行,则当一个选项卡无响应时,所有选项卡均无响应。这是一个很糟糕的体验。

image

点击看动画

将浏览器的工作分成多个进程的另一个好处是安全性和沙盒。由于操作系统提供了一种限制进程权限的方法,因此浏览器可以对某些进程的某些功能进行沙箱处理。例如,Chrome 浏览器限制处理任意用户输入的进程(如渲染器进程)的任意文件访问。

因为进程有自己的私有内存空间,它们通常包含通用基础设施的副本(例如 V8,它是 Chrome 的 JavaScript 引擎)。这意味着更多的内存使用,因为它们不能像在同一进程中的线程那样共享。为了节省内存,Chrome 限制了它可以启动的进程数。限制取决于您的设备拥有多少内存和 CPU 能力,但是当 Chrome 达到限制时,它会开始在一个进程中运行来自同一站点的多个选项卡。

节省更多内存 - Chrome 中的服务化

相同的方法适用于浏览器进程。Chrome 正在经历架构更改,以将浏览器程序的每个部分作为服务运行,从而可以轻松拆分为不同的进程或聚合为一个。

一般的想法是,当 Chrome 在强大的硬件上运行时,它可能会将每个服务拆分为不同的进程以提供更高的稳定性,但如果它在资源受限的设备上,Chrome 会将服务整合到一个进程中以节省内存占用。在此更改之前,已在 Android 等平台上使用了类似的整合流程以减少内存使用的方法。

image

查看动画

每帧渲染器进程 - 站点隔离

站点隔离是 Chrome 中引入的一项功能,它为每个跨站点 iframe 运行单独的渲染器进程。我们一直在讨论每个选项卡模型一个渲染器进程,它允许跨站点 iframe 在单个渲染器进程中运行,并在不同站点之间共享内存空间。在同一个渲染器进程中运行 a.com 和 b.com 似乎没问题。同源策略 是网络的核心安全模型;它确保一个站点在未经同意的情况下无法访问其他站点的数据。绕过此策略是安全攻击的主要目标。进程隔离是分隔站点的最有效方法。自 Chrome 67 起,默认情况下在桌面上启用站点隔离,选项卡中的每个跨站点 iframe 都会获得一个单独的渲染器进程。

image

启用站点隔离是一项多年的工程工作。站点隔离并不像分配不同的渲染器进程那么简单;它从根本上改变了 iframe 相互通信的方式。在不同进程上运行 iframe 的页面上打开 devtools 意味着 devtools 必须实施幕后工作以使其看起来无缝。即使运行一个简单的 Ctrl+F 在页面中查找单词也意味着在不同的渲染器进程中进行搜索。您可以看到浏览器工程师将站点隔离的发布称为重要里程碑的原因!

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

推荐阅读更多精彩内容