- tags: web
- date: 2018-11-12
本系列文章从内部剖析了 Chrome 浏览器的进程、线程架构设计,各部原理等基础知识,梳理了浏览器是怎样将你的代码变成网站的,解开某个特定技术为什么可以提高性能的疑问。本文是这个系列的第一篇,讲述了 Chome 浏览器在 CPU,GPU,内存,和多进程架构 方面的设计。
本系列文章共 4 篇,原文发布在 Google 开发者博客,作者 Mariko Kosaka 。文章中涉及非中文局域网友好链接
请读者自行解决。
为了了解浏览器工作的环境,我们需要了解一些计算机部件以及他们的功能。
4核CPU就像流水线上的工人在自己的位子上处理分配给他们的任务
CPU(Central Processing Unit) 可以看做是计算机的大脑。图中的每个 CPU 核心,就像是流水线上的工人,可以串行处理分配给他们不同的任务。他们可以处理从数学到艺术在内的所有任务,同时知道如何回复客户电话。CPU 大多只有一块芯片,一个核心就像是在这同一张芯片上另外一个 CPU。现代硬件 CPU 通常有不止有一个核心,这给你的手机和计算机带来了强大的运算能力。
许多带有扳手的GPU内核表示他们可以处理有限的任务
GPU(Graphics Processing Unit) 也是计算机的一个部件,不像 CPU,GPU 擅长处理一些简单但是需要大量核心同时工作的任务。就像它的名字提到的,最开始 GPU 就是为了图形处理而生的,这也是为什么 GPU或者基于GPU的系统通常与快速渲染、流畅交互相关。最近几年,随着 GPU加速计算 的发展,越来越多的运算类型可以只在 GPU 上完成。
计算机的3层架构。硬件是最底层、中间是操作系统、软件在最上层
当你在手机或者电脑上打开软件的时候,CPU、GPU 协作运算出了软件的交互。当然通常的,软件是通过操作系统的协调来操作 CPU 和 GPU 的。
在深入浏览器架构之前要掌握的另一个概念是进程和线程。 进程可以描述为软件的执行程序。 线程是存在于进程内部执行其部分程序的程序。
进程就像是一个鱼缸,线程像是在浴缸里游来游去的鱼
启动软件时将创建若干个进程或线程来完成工作。 操作系统为进程提供了“slab”内存,并且所有软件状态都保存在该专用内存空间中。 当您关闭应用程序时,该软件创建的进程和线程会被销毁,相应的内存区域也会被释放。
进程使用内存空间存储数据, 点击图片查看动画
进程可以要求操作系统启动另一个进程来运行不同的任务。 发生这种情况时,将为新进程分配内存的不同部分。 如果两个进程需要通信,他们可以通过使用进程间通信(IPC)来实现。 许多应用程序都是以这种方式工作的,因此如果工作进程无响应,可以重新启动它,而不会停止运行应用程序不同部分的其他进程。
通过IPC进行通信的独立进程图, 点击图片查看动画
那么如何使用进程、线程构建Web浏览器?可能使用一个进程加很多线程或者是很多进程和很多线程,只有少数线程通过 IPC 通信。
不同浏览器的进程/线程架构
这里要注意的重要一点是,这些不同的架构只是实现细节不同。 关于如何构建 Web 浏览器没有标准规范。 一种浏览器的方法可能与另一种浏览器完全不同。
下图描述了 Chrome 浏览器最新架构。
Chrome的多进程架构图。 渲染进程下显示多个图层表示Chrome为每个选项卡运行多个渲染器进程
最重要的是浏览器进程与负责应用程序不同部分的其他进程协调。 对于渲染器进程,将创建很多个并将其分配给每个选项卡。 直到最近,Chrome才为每个标签提供一个单独进程; 现在正尝试为每个站点提供自己的进程,包括同一个选项卡下的iframe(请参阅 站点隔离)。
下面表格描述了不同的进程各种控制浏览器的那部分工作
进程 | 功能 |
---|---|
Browser | 控制 Chrome 提供的基础功能如:地址栏、书签、前进与后退,还处理诸如隐藏窗口、网络请求、文件等功能更 |
Renderer | 负责选项卡内网站展示相关的所有工作 |
Plugin | 控制网站使用插件相关的功能如flash |
GPU | 独立于其他进程处理GPU任务。 它被分成不同的进程,因为GPU处理来自多个应用程序的请求并将它们绘制在同一屏幕上 |
不同进程作用于浏览器界面不同部分
还有更多的如扩展、实用进程。 如果你想查看 Chrome 中正在运行的进程数,请点击右上角的选项菜单图标,选择更多工具,然后选择任务管理器,将打开一个窗口,其中包含当前正在运行的进程列表以及它们 CPU /内存 使用量。
之前,我曾提到 Chrome 使用多个渲染器进程。 在最简单的情况下,您可以想象每个选项卡都有自己的渲染器进程。 假设您打开了3个选项卡,每个选项卡都由独立的渲染器进程运行。 如果一个选项卡没有响应,则可以关闭无响应的选项卡同时保持其他选项卡处于正常状态。 如果所有选项卡都在一个进程上运行,则当一个选项卡无响应时,所有选项卡都不会响应。
选项卡多进程示例,点击图片查看动画
多个进程运行浏览器的另一个好处是安全性和沙盒。 由于操作系统提供了限制进程权限的方法,因此浏览器可以从某些功能中对某些进程进行沙盒处理。 例如,Chrome浏览器限制处理任意用户输入(如渲染器进程)的进程的任意文件访问。
由于进程有自己的私有内存空间,因此它们通常包含了基础服务的副本(例如 V8, Chrome 的 JavaScript 引擎),这意味着更多的内存使用。 为了节省内存,Chrome限制了启动进程的数量。 这个限制因设备的内存和 CPU 配置而异,当Chrome 达到限制时,它会在一个进程运行同一网站的多个选项卡。
同样的方法适用于浏览器进程。 Chrome 正在进行体系结构改进,以便将浏览器程序的每个部分作为一项服务运行,从而可以轻松拆分为不同的�进程或汇总为一个进程。
通常当 Chrome 在高配置的硬件上运行时,它可能会将每个服务拆分为不同的进程,从而提供更高的稳定性,但如果它位于资源受限设备上时,Chrome 会将服务整合到一个进程中,从而节省内存占用。类似 Android 的平台上已经使用类似的方法来整合进程以减少内存使用。
Chrome的服务化,将不同的服务转移到多个流程和一个浏览器流程中,点击图片查看动画
网站隔离 是 Chrome 最近推出的一项功能,可为每个站点 iframe 运行单独的渲染器进程。我们一直在讨论每个选项卡包含一个不同的渲染器进程,它允许跨站点(iframe) 在单个渲染器进程中运行,并在不同站点之间共享内存空间。 在同一个渲染器进程中运行 a.com
和 b.com
似乎没问题。 同源策略 是 Web 的核心安全模型; 它确保一个站点在未经同意的情况下无法访问其他站点的数据。 绕过此策略是安全攻击的主要目标。 进程隔离是网站隔离最有效方法。 随着 Meltdown and Spectre病毒的出现,我们使用进程分离站点变得更加迫切。 默认情况下,自 Chrome 67 启用网站隔离功能后,选项卡中的每个跨站点 iframe 都会获得单独的渲染器进程。
网站隔离,选项卡内iframe的多个渲染器进程
启用�网站隔离是一项多年的工程。站点隔离并不像分配不同的渲染器进程那么简单;它从根本上改变了 iframe 彼此通讯的方式。在不同进程上运行的 iframe 的同一个选项卡上打开 devtools 意味着 devtools 必须实现幕后工作以使其看起来无缝兼容。即使简单的运行 Ctrl+F
来查找页面中的单词也意味着搜索不同的渲染器进程。这是浏览器工程师将网站隔离的发布作为一个重要里程碑的原因!
在这篇文章中,我们高纬度的介绍了浏览器体系结构的,并介绍了多进程体系结构的优点。 我们还介绍了 Chrome 中与多进程架构密切相关的服务化和站点隔离。 在下一篇文章中,我们将开始深入研究这些进程和线程之间是怎样协作以加载一个网站的。