页面首屏渲染性能指南

我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。

在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。我将探索可能导致高渲染时间的问题，以及如何解决它们。

关键渲染路径（CRP）

关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。 如下图所示：

请添加图片描述

首先，一旦浏览器得到响应，它就会开始解析它。当它遇到依赖项时，它会尝试下载它。 如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。

如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。 只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。这就是为什么 JS 会阻塞解析的原因。

完成所有解析后，浏览器将构建文档对象模型 (DOM) 和级联样式表对象模型 (CSSOM)。 将它们组合在一起得到渲染树。 页面的不显示部分不会进入渲染树，因为它只包含绘制页面所需的数据。

倒数第二步是将渲染树进行布局，这个阶段也称为回流：就是计算每个渲染树节点的每个位置及其大小的地方。

最后一步是绘制。它会根据浏览器在前一阶段计算得到的数据对像素进行着色。

优化相关结论

因此，根据这一过程，我们在优化性能方面，得出了一些结论。如果你要提升页面初始化渲染的性能，你需要：

减少传输的数据量
减少浏览器必须下载的资源数量（尤其是阻塞的资源）
减小 CRP 的长度

同时，我们会根据下面 3 个指标来衡量优化的效率：

FP(First Paint)
FCP(First Contentful Paint)
FMP(First Meaningful Paint)

除了渲染时间之外，还有其他一些因素也需要考虑。例如，你的页面使用了多少阻塞资源以及下载它们需要多长时间。 ❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取【免费的优质学习资料】~

性能优化策略

鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略：

尽量减少通过网络传输的数据量；
减少通过网络传输的资源总数；
缩短关键渲染路径；

1. 减少要传输的数据量

首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。其次，删除所有重复项。

然后，我建议建立一个自动压缩过程。例如，它应该从你的后端服务中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我们剩下的可以是文本字符串。这意味着我们可以安全地应用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。

最后，还有缓存。浏览器第一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。 但是，记住两点至关重要：

如果你使用 CDN，请确保支持缓存并在正确设置。
与其等待资源的到期，不如 将文件的“指纹”嵌入到其 URL 中，以使本地缓存无效。

当然，应该为每个资源定义缓存策略。有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息（可以使用 “private” 防止 CDN 缓存私有数据）。

2. 减少关键资源的总数

“关键”仅指网页正确呈现所需的资源。因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。

样式

为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。使用这种方法，浏览器将只根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级。例如，如果你将 media="print" 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。

为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。