深刻现代浏览器(第一部分)

深刻现代浏览器(第一部分)

CPU, GPU, 内存, 和多线程架构

在这四篇博客系列中, 咱们深刻到Chrome浏览器内部, 从高级架构到渲染通道的细节, 进行观察. 若是你曾好奇浏览器如何把你的代码变成网站的功能, 或者你不肯定为何建议使用特殊的技术来提升性能, 那这个系列就是为你设计的.

做为这个系列的第一部门, 咱们将会查看电脑的一些核心感念和Chrome的多线程架构.

计算机核心CPU和GPU

首先咱们要了解浏览器的运行环境, 咱们须要理解几个计算机的核心部分, 以及他们都作了什么.

CPU

图1: 4CPU内核, 就像办公司工做人员坐在每一张桌子钱处理到来的任务.

首先, 是中央处理器(Center Processing Unit), 也就是CPU. CPU被认为是计算机的大脑. 一个CPU核, 想象成一个官方工做者, 可以处理一个又一个不一样的任务. 过去大多时候, CPU是一个简单的芯片. 一个内核就像在同一个芯片中的另外一个CPU. 现代电子产品中, 一般不止一个核心, 给了你手机和笔记本电脑更强大的处理功能.

GPU

图2: 许多带着扳手的GPU处理器内核, 代表他们只能处理有限的任务.

图像处理器(Graphics Processing Unit), 也就是GPU, 是计算机的另外一个部分. 和CPU不一样, GPU擅长处理一些简单的任务, 可是能够同时跨域多个内核. 顾名思义, 起初是为了处理图像开发的. 这就是为何在图形环境中, 使用GPU, 或者GPU支持, 老是和更快的渲染, 更顺畅的交互相关联. 近几年, 随着加速GPU计算, GPU有可能单独完成愈来愈多的计算.

当你在电脑或者手机打开一个应用, CPU和GPU驱动这个应用. 在通俗的说, 应用程序经过操做系统的机制, 运行在CPU和GPU上.

图3: 电脑的三层体系结构. 机器硬件层在最底部, 操做系统层在中间, 应用在最上面.

在进程和线程中运行程序

图4: 进程就好像一个封闭的盒子, 线程就好像抽象的鱼在进程中游动

在讲解浏览器的体系结构以前, 须要认识另外一个概念, 就是进程和线程. 一个应用的运行, 可以被理解为一个进程. 一个线程存在进程中, 也就是执行程序的某一个部分.

当你运行一个程序的时候, 一个进程就被建立了. 这个程序也许建立了(许多)线程来帮助它工做, 但这是非必须的. 操做系统提供给进程一块内存空间用来工做, 而且全部的应用都保持在一个各自的内存空间中. 当你关闭这个应用的时候, 这个进程才会被操做系统从内存中清除.

图5: 进程使用空间示意图, 以及如何存储一个应用.

一个进程可以要求操做系统再运行其余的进程来运行不一样的任务. 这样搞的时候, 内存会给新的进程分配不一样的空间. 两个进程之间可使用IPC(Inter Process Communication)进行通讯. 许多应用使用这种设计进行工做, 因此若是一个工做进程再也不响应, 它可以在不中止应用程序在进程上运行的其余部分, 而从新启动.

图6: 不一样的进程之间经过设计的IPC进行通讯.

浏览器设计

因此如今的浏览器如何使用进程和线程? 它是使用了一个进程多个线程? 仍是使用了多个进程, 每一个进程又有不少的线程, 进程之间使用IPC通讯呢?

图7: 不一样的浏览器使用不一样的进程/线程架构

这里有一点须要注意, 不一样的架构是实现细节的不一样. 如何构建一个浏览器, 并无规范. 一个浏览器某个方法的实现, 可能和另外一个彻底不一样.

为了这个博客系列, 咱们会使用Chrome最近的价格, 正以下图展现的.

第一张图表示浏览器进程正在协调处理着其余功能模块的进程. 对于渲染进程, 每个tab页都会建立一个渲染进程. 以前, 当一个tab页准备好的时候, chrome就分配给一个进程. 如今它尝试给每个网站提供本身的进程, 包括iframes(详见: Site Isloation)

图8: 此图表示Chrome的多进程架构. 渲染进程下展现了多个图层, 表示Chrome为每个tab页运行了多个渲染进程.

各类进程分别控制了什么

• Browser(浏览器进程)
  • 控制浏览器的"Chrome"部分, 包括, 地址栏, 书签, 前进后退按钮.还处理浏览器不可见的特权部分, 包括网络请求和文件访问.
• Render(渲染进程)
  • 控制在网站在tab中想要展现的一切
• Plugin(插件)
  • 控制网站中使用的插件, 好比: flash
• GPU
  • 处理其余进程中被隔离的任务.它被分散到各个进程中, 由于GPUS的处理请求来自各个应用, 并把他们画到同一个平面上

  图9: 不一样的进程指向浏览器不一样的UI部分.

  还有更过的进程, 例如: 扩展进程, 公用进程等. 若是你想看到更多的进程运行在你的Chrome, 点击有商家的三个点. 选择, More Tools, 再选择, Task Manager. 这会打开包括当前运行进程列表的窗口, 而且能够看到正在使用的CPU/内存等状况.

Chrome多进程架构的好处

刚刚, 我提到Chrome使用的是多个渲染进程.最简单的状况下: 你能够想象每一个tab页都有本身的渲染进程. 若是你有三个tab页打开, 每一个tab页都独立运行一个渲染进程. 若其中要给tab页再也不响应, 而后你能够关闭这个不响应的tab页并继续使用, 保证其余的tab页不受影响. 若是全部的tab页都运行在同一个进程中, 当一个tab页不响应的时候, 全部的tab页都不响应了. 那将十分糟糕.

图10: 演示了每个tab页中运行了不一样的进程.

浏览器的分离工做方法的另外一个好处就是不一样的进程是安全和沙箱化. 由于操做系统提供了一种方法限制进程的提权, 因此, 浏览器能够用沙箱的方法保护一些功能上的进程. 举个例子: Chrome限制了各类处理输入进程(例如渲染进程)为所欲为的文件访问权.

由于进程有各自的私人内存空间, 他们一般包含公共设施的副本(例如V8是Chrome的JS引擎). 若是他们线程不能在同一个进程中, 互相之间没有分享的方式, 就会消耗更多的内存空间.为了节省内存, Chrome对于线程可以掉起多少个线程. 这种限制取决与你设备提供的内存, 和CPU的支持, 但当Chrome达到极限时, 它会在同一个进程中运行多个tab页.

节省更多的内存, Chrome中的服务

相同的方式应用在浏览器的进程中. Chrome正在经历一个结构的改变. 将浏览程序的每个部分做为一个服务运行, 就能够轻松的分红不一样的进程, 或者聚合成一个进程.

普通的想法是: 当Chrome运行在强大的硬件上时, 它的程序会分红不一样的服务运行在不一样的进程中, 以此经过更多的稳定性, 但若是运行在资源受限的设备上, Chrome会把服务放到一个进程中来节省内存空间. 在这种变化以前, 相似的用合并进程来减小内存的使用, 已经在安卓平台上使用过了.

图11: 展现了Chrome的服务体系从多个服务分散在多个进程中, 到合并到一个进程中.

每一帧的渲染进程 - 站点隔离(Site Isolation)

Site Isolation是Chrome近期介绍的功能, 可以为夸站点服务运行不一样的渲染进程. 咱们正在讨论每个tab模型都使用一个渲染进程, 那样便容许跨站点的iframes运行在同一个渲染进程中, 不一样的站点就能够分享内存空间. 运行一个a.com和一个b.com在同一个渲染进程中, 看起来没问题. 同源策略web的核心安全机制, 它能够确保一个站点, 在另外一个站点不一样的状况下, 不能访问数据. 绕过此策略是安全攻击的主要目标. 进程分离, 是分离站点最有效的方式. 发生崩溃和不肯定错误的时候Meltdown and Spectre, 咱们须要使用进程来分离站点, 让其变得更加容易排查. 自从Chrome67之后, 站点分离的技术在桌面上是默认开启的, 每个在tab中夸站点的iframe, 都会得到一个分离的渲染进程.

图12: 展现站点分离, 多个渲染进程执行站点内部的iframes.

站点分离技术可以使用通过了多年的努力. 站点分离不是简单的分配不一样的渲染进程; 它从根本上改变了iframes之间的通讯方式. 打开一个上面有iframes的页面的devtools, 这就意味着devtools必须作一些幕后的工做, 让它看起来很完美无缺. 即便运行了一个简单的Ctrl+F, 在页面中查找一个单词, 也表示须要跨域不一样的熏染进程进行查找. 如今你能够看到缘由, 我社么浏览器引擎发布站点分离的时候, 做为一个主要的里程碑功能

总结

在这里, 咱们从更高层次总结了浏览器高级架构的, 而后总结了多进程结构的好处. 也总结了Chrome服务和站点分离, 这些与多进程深深相关的功能.在下一篇文章里, 咱们深刻了解进程和线程都干了什么, 来显示一个网站.