以Chrome浏览器为例
- Chrome、Edge、以及很多国产浏览器都是基于Chromium二次开发的，例如360极速浏览器、世
界之窗极速版、傲游浏览器、UC浏览器电脑版、红芯浏览器 - Chrome是世界上使用率最高的浏览器
Chromium VS Chrome
- Chromium和Chrome都是Google主导开发的基于Blink内核，目前公认的最快的网页浏览方式
- Chromium是开发版本、不能自动更新. 而Chrome是一个稳定的产品，可以自动更新
- 开发Chromium的意义是为了解决Chrome在有些系统上的不足之处
打开一个页面有几个进程
2007年之前
image.png
08年发布的进程架构
image.png
目前的多进程架构
image.png
各进程作用
- 浏览器进程：主进程，负责界面显示、用户交互、子进程管理、同时提供存储功能
- 渲染进程：核心任务是将HTML、CSS、JS转换为网页。排版引擎Blink以及JS引擎V8都运
行与此。 - GPU进程：调用系统硬件进行渲染
- 网路进程：负责网络资源加载
- 插件进程：负责插件的运行
从输入URL到页面展示流程示意图
image.png
具体过程
- 用户输入
- URL请求过程
- 准备渲染进程
- 提交文档
- 渲染阶段
用户输入
- 用户输入后，地址栏判断输入的是搜索内容还是请求URL
- 是搜索内容，地址栏会使用默认搜索引擎合成带搜索关键字的URL
- 符合URL规则的，地址栏会把协议加上，合成完整的URL
URL请求过程
- 浏览器进程通过IPC把URL发送至网络进程。
- 检查是否有缓存，有则直接返回资源给浏览器进程，否则发起网络请求。
- 进行DNS解析，获取域名的服务器IP地址。如果是https协议，建立TLS链接。
- 和服务器建立TCP连接并把发送请求数据给服务器。
- 收到请求后服务器返回响应数据并发送给网络进程。
- 网络进程解析响应数据，判断是否需要重定向或报错，根 据Content-Type 判断如何处理响应内容。如果是 HTML，那么浏览器则会继续进行导航流程。
准备渲染进程
Chrome为每一个页面分配一个渲染进程，有些情况例外
1、多个 空白页签共用一个进程
2、从一个页面打开新的页面，且新页面和当前页在同一站点，那么复用同一个进程。
同源
image.png
同站
image.png
提交文档
- 浏览器进程接收到网络进程的响应头数据后，向渲染进程发起“提交文档”消息
- 渲染进程收到“提交文档”消息后和网络进程建立数据传输“通道”
- 数据传输完毕后，渲染进程返回“确认提交”消息给浏览器
- 浏览器收到“确认提交”消息后更新浏览器，包括安全状态、地址栏URL、前进后退历史状态、更新web页面
渲染阶段
渲染过程会被分成很多子阶段输出给浏览器进程。
image.png
- 构建 DOM 树
- 样式计算（Recalculate Style）
- 布局阶段
- 分层
- 图层绘制
- 栅格化（raster）操作
- 合成
- 显示在浏览器
构建 DOM 树
浏览器无法理解和使用HTML，所以将HTML转为浏览器能理解的DOM树。
image.png
样式计算（Recalculate Style)
-
把 CSS 转换为浏览器能够理解的结构
image.png -
转换样式表中的属性值，使其标准化
image.png -
计算出 DOM 树中每个节点的具体样式
image.png
布局阶段
-
创建一颗只包含可见元素布局树
image.png 布局计算
计算布局树节点的坐标位置并把运算结果写回布局树中。
分层
页面中很多复杂的效果如一些复杂的 3D 变换、页面滚动，或用 z-indexing 做 z 轴排序等，为了实现这些效果，渲染引擎为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。
image.png
图层绘制
渲染引擎会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表。
image.png
栅格化
绘制列表是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。
有的图层很大，比如有的页面要滚动很久才能滚到底部，合成线程将图层划分为图块。图块栅格化转为位图。
通常，栅格化过程会使用 GPU 来加速生成，使用GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。
合成和显示
视图内所有图块都被栅格化，合成线程就会生成一个绘制图块的命令并提交给浏览器进程。
浏览器进程接收合成线程发过来的绘制图块命令，然后根据命令，将页面内容绘制到内存中，最后再将内存显示在屏幕上。
