⚡ 30 秒速记

• 文档和样式决定盒子，布局计算位置与尺寸
• 绘制生成视觉内容，合成把结果送到画面
• 修改命中哪个阶段，决定需要重做多少工作
• 写样式后立刻读布局，可能强制刷新
• 图层有资源成本，不能无限增加

浏览器渲染像排版再画图：先算每个盒子放哪里、多大，再画出颜色和内容，最后合成画面。 文档、样式和脚本会影响这条流程，但不是每次变更都从头重跑。尺寸变化通常需要重新布局，颜色变化主要影响绘制，一些变换有机会只走合成。优化要根据性能记录减少真正昂贵的阶段，尤其避免反复交错写样式与读布局造成同步刷新。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

一、浏览器如何渲染网页

概述：浏览器渲染一共有五步

1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，计算每个节点的位置。
5. 生成绘制记录、光栅化并合成图层；具体工作由引擎按线程与硬件条件分配。

瓶颈可能出现在解析、脚本、样式、布局、绘制或合成阶段，需通过实际记录定位，不能固定认定哪两步最慢。

具体如下图过程如下图所示

渲染

• 网页生成的时候，至少会渲染一次
• 在用户访问的过程中，还会不断重新渲染

重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)

• 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，选择器复杂度、匹配范围、节点数量和样式失效频率都会影响耗时，不能只按选择器是否具体判断快慢
• 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM

二、浏览器渲染五个阶段

2.1 第一步：解析HTML标签，构建DOM树

在这个阶段，引擎开始解析html，解析出来的结果会成为一棵dom树 dom的目的至少有2个

• 作为下个阶段渲染树状图的输入
• 成为网页和脚本的交互界面。(最常用的就是getElementById等等)

当解析器到达script标签的时候，发生下面四件事情

1. html解析器停止解析,
2. 如果是外部脚本，就从外部网络获取脚本代码
3. 将控制权交给js引擎，执行js代码
4. 恢复html解析器的控制权

由此可以得到第一个结论1

• 由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。
• defer和async属性也能有助于加载外部脚本。
• defer使得脚本会在dom完整构建之后执行；
• 外部 async 脚本并行下载，但就绪后的执行仍占用主线程，可能暂停解析；下载不阻塞和执行不阻塞不是一回事。