⚡ 30 秒速记
- 解析得到结构，样式计算确定展示规则
- 布局处理几何信息，绘制记录视觉内容
- 光栅化把绘制内容转成像素
- 合成组织可显示结果，并非每帧都重跑全部阶段
- 更新范围与图层策略都要实测
页面渲染可以拆成算结构、算位置、画内容、变像素和合成画面几步。 文档与样式决定元素怎样展示，布局给出尺寸与位置，绘制和光栅化把视觉内容准备好，再由合成过程形成画面。后续变化只需要重做受影响的工作，比如颜色通常不要求重新排版。知道每步做什么，才能从性能记录里分清是节点太多、布局反复，还是绘制区域过大。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 浏览器的内部结构
从结构上来说，浏览器主要包括了八个子系统：用户界面、浏览器引擎、渲染引擎、网络子系统、JavaScript 解释器、XML 解析器、显示后端、数据持久性子系统
这些子系统组合构成了我们的浏览器。页面的加载和渲染过程，离不开网络子系统、渲染引擎、JavaScript 解释器和浏览器引擎。
以前端开发最常使用的 Chrome 浏览器为例， Chrome 浏览器是使用多进程架构的方式来管理这些子系统。
# Chrome 多进程架构
Chrome 浏览器采用的多进程架构，主要包括四个进程
- 浏览器进程：选项卡之外的所有内容都由浏览器进程处理，浏览器进程则主要用于控制和处理用户可见的 UI 部分（包括地址栏，书签，后退和前进按钮）和用户不可见的隐藏部分（例如网络请求和文件访问）
- GPU 进程：该进程用于完成图像处理任务，同时还支持分解成多个进程进行处理
- 渲染器进程：Chrome 浏览器中支持多个选项卡，其中每个选项卡在单独的渲染器进程中运行，渲染器进程主要用于控制和处理选项卡中的网站内容显示
- 插件进程：管理 Chrome 浏览器中的各个插件
对于“在浏览器的地址栏中输入 URL，按下回车键，到浏览器渲染页面”这个过程，浏览器内部会通过浏览器进程和渲染器进程，进行很多交互逻辑，最终才得以将页面内容显示在屏幕上
其中，浏览器进程和渲染器进程同样支持多线程，包括以下这些线程。
这些线程其实并不陌生，在前面介绍的内容中有提到，比如：
- 在页面的加载过程中，涉及 GUI 渲染线程与 JavaScript 引擎线程间的互斥关系，因此页面中的
<script>和<style>元素设计不合理会影响页面加载速度； - 在 UI 线程、网络线程、存储线程、浏览器事件触发线程、浏览器定时器触发线程中，I/O 事件通过异步任务完成时触发的函数回调，解决了单线程的 Javascript 阻塞问题。
下面我们再来看下 Chrome 浏览器中页面的渲染过程，包括浏览器进程和线程如何通信来显示页面。
# 浏览器中页面的渲染过程
首先我们将浏览器中页面的渲染过程分为两部分。
- 页面导航：用户输入 URL，浏览器进程进行请求和准备处理。
- 页面渲染：获取到相关资源后，渲染器进程负责选项卡内部的渲染处理。
