3.3 优化 CRP（二）Optimize Critical Rendering Path II

Question

这节课讲 CRP 中剩下三个部分的优化：渲染树、布局、绘制。

卡顿

卡顿是指网页的刷新频率低于人眼可识别的最低频率：60Hz。也是 60fps 这个数字的由来。网页刷新时，至少要达到每秒刷新60次，才能让用户感觉不出卡顿。这很重要，因为用户每在互联网产品上多等待一秒，就会多一分焦躁，进而离开网页。

我们需要了解的是，导致卡顿的原因，以及如何修复它们，达到更高的 fps。这样，我们首先需要了解，每一次刷新（每一个 frame）是如何被渲染出来的。

太通俗易懂的解释了，一图胜千言，下面四个链接是必须看的：

Rendering a Frame

• How DOM & CSSOM interpreted and combined into a Render Tree
• Render Tree, Layout and Painting and Composite

Rendering, Layout and Painting

• The Render Tree
• Layout and Paint

什么情况下浏览器会执行重新渲染、布局或绘制的操作呢？正常的工作流如下：

一般来说，我们通过 JS 或 CSS 或 Web Animation API 改变了页面的样式元素，Recalculate Style 重新构造 CSSOM 树这一步是一定会进行的，接下来，视你改变的元素不同，后续流程需要执行的步骤也不同：

• 改变了影响页面布局的元素，如页面宽度、高度、位置等，则浏览器必须重新计算布局、绘制、合并图层
• 改变了影响页面绘制但不影响布局的元素，如背景颜色等，则浏览器无需重新计算布局，仅需绘制合并两步
• 改变了仅影响图层的元素：则前两步布局和绘制都不需要。

有个错误，当使用了 CSS 来改变布局时，浏览器不需要 style 步骤？