Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
silence717 opened this issue Feb 28, 2021 · 0 comments

Comments

@silence717
Copy link
Owner

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

浏览器的核心是CPU和GPU

CPU

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

cpu.png

GPU

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

gpu.png

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

在进程和线程上执行程序

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

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

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

workerprocess.svg

浏览器架构

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

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

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

每个进程控制什么?

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

不同进程指向浏览器UI界面的不同部分:
browser-1.png

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

browser-3.pngbrowser-2.png

Chrome多进程架构的优势

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

tabs.svg

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

节省内存 - chrome的服务化

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

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

servicfication.svg

独立渲染进程 - 站点隔离

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

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

总结

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant