⚡ 30 秒速记
- 核心判断：页面从 HTML/CSS 解析到布局、绘制和合成是一条流水线，变更命中哪一层决定更新成本
- 原理主线：围绕 「一、浏览器如何渲染网页」、「二、浏览器渲染五个阶段」、「三、渲染优化相关」 建立输入、状态变化与输出之间的因果关系
- 文章范围：介绍了浏览器渲染网页的五个主要阶段，包括HTML解析、DOM和CSSOM树的构建、渲染树合成、布局计算以及页面绘制，帮助前端开发者理解浏览器渲染流程及性能优化要点。
- 边界与代价：浏览器会批量延迟样式计算，但同步读取布局可能强制刷新；合成层也不是越多越好
- 工程落地：优化应使用性能面板确认主线程、布局、绘制与合成瓶颈，再减少对应阶段的工作量
浏览器会把 HTML 和 CSS 分别解析为 DOM、CSSOM，再生成渲染树，经过布局、绘制与图层合成后显示页面。 普通脚本会暂停 HTML 解析，样式表构建又会阻塞渲染，并可能影响脚本执行，因此首屏资源的加载顺序很关键。改变尺寸或位置会触发回流并伴随重绘，只改颜色等外观通常只需重绘。频繁动画我会优先考虑 transform、requestAnimationFrame 或独立图层，但图层过多也会增加资源消耗。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、浏览器如何渲染网页
概述：浏览器渲染一共有五步
- 处理
HTML并构建DOM树。 - 处理
CSS构建CSSOM树。 - 将
DOM与CSSOM合并成一个渲染树。 - 根据渲染树来布局，计算每个节点的位置。
- 调用
GPU绘制，合成图层，显示在屏幕上
第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染
具体如下图过程如下图所示
渲染
- 网页生成的时候，至少会渲染一次
- 在用户访问的过程中，还会不断重新渲染
重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)
- 在构建
CSSOM树时，会阻塞渲染，直至CSSOM树构建完成。并且构建CSSOM树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行速度越慢 - 当
HTML解析到script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS文件。并且CSS也会影响JS的执行，只有当解析完样式表才会执行JS，所以也可以认为这种情况下，CSS也会暂停构建DOM
