《Inside look at modern web browser (part 1)》学习笔记

学习资料：Inside look at modern web browser (part 1)

学习进度跟踪

• 2021.06.13下午。看完developer design doc后，发现还有一个由google browser engineer写的很不错的系列文章，介绍现代浏览器的内部结构，图文并茂，很不错，学之！今天多喝水，争取不熬夜 =.= ！
• 2021.06.13晚上。Finish Part 1！

第二部分的学习笔记 传送门：Inside look at modern web browser (part 2)

---

导读

CPU、GPU、Memory与多进程架构

一共四个部分文章，从架构的角度来学习浏览器的渲染管线

作为第一部分内容，将会介绍 相关的专业术语（term），以及chrome的多进程架构

---

计算机和核心是CPU与GPU

为了更好地理解浏览器运行的机制，首先要了解计算机的重要组成部分CPU与GPU

CPU（Central Processing Unit）

每个CPU的核心都可以按照输入的顺序，依次处理task。过去CPU往往是单核，现在大部分的CPU都是多核

 

GPU（Graphics Processing Unit）

GPU不像CPU，擅长处理简单任务和同时跨核工作。GPU更擅长图像方面的处理

随着GPU加速计算发展，更多的计算能单独在GPU上实现

 

一个应用需要CPU和GPU提供算力支持，通常来说，Application使用CPU和GPU，需要以Operating System 作为中间层

---

在进程和线程执行程序

线程就像条鱼一样，玩耍在进程空间中

启动一个Application 对应就会创建一个Process，是否需要Thread来帮助Process运行代码是可选择的，取决于使用者

一个进程可以通过IPC（Inter-Process Communication）进行进程间通信

---

Chrome浏览器架构

 

每一个Process的主要职责

• Browser Process
  • 地址栏，书签栏，前进后后退按钮
  • 联网请求和文件权限
• Render Process
  • 经过若干个stage，将最后的CommonBuffer交给GPU Process
• Pulgin Process
• GPU Process
  • GPU若干个不同的进程，因为GPU要处理很多类型的APP

 

Chrome多进程架构的好处

• 一个tab Process挂了，不影响其他tab Process
• Security and sandboxing，在沙箱环境可以限制进程的权限
• 对于公共代码来说，每一个进程都有一份副本，这增大了内存空间。因此chrome有tab的最大上限，可能会出现一个Render Process进程跑多个tab（俗称reuse

---

节省更多的空间 —— Chrome服务化

chrome正在经历架构演变 —— 将browser program服务化，更容易拆分成若干个Process 或者 聚合成一个Process  

简单来说，就是在性能好，内存足的机器上，将browser program尽可能分成多个进程，以提供最高的稳定性。在性能差，资源紧缺的机器上，进程数量要尽量少。找一个平衡点

左图就是集中化，因为性能一般  ； 有图就是进程细化，因为性能好

---

站点分离

站点分离，是同源策略的最好实现方式。每个Iframe都有独立的Render Process

站点分离耗了多年时间完成，是很重要的milestone

---

总结

在这一篇文章中，了解chrome的多进程架构，了解chrome的服务化以及站点分离

接下来将了解进程和线程中，分别做了什么事，使得web得以表现