您的网页的渲染性能是否符合当今的标准? 渲染是当用户访问网站时，将服务器的响应转换成浏览器“描绘”的图像的过程. 糟糕的渲染性能会导致相对较高的跳出率.

有不同的服务器响应决定是否呈现页面. 在本文中, 我们将专注于网页的初始渲染, 它从解析HTML开始(前提是浏览器已经成功地接收到HTML作为服务器的响应). 我们将探索可能导致高渲染时间的事情，以及如何修复它们.

关键渲染路径

关键呈现路径(CRP)是浏览器将代码转换为屏幕上可显示像素的过程. 它有几个阶段, 其中一些可以并行执行以节省时间, 但有些部分必须按顺序完成. 这是可视化的:

首先，一旦浏览器得到响应，它就开始解析它. 当遇到依赖项时，它会尝试下载它.

如果它是一个样式表文件, 浏览器必须在呈现页面之前完全解析它, 这就是为什么 CSS被称为渲染阻塞.

如果它是一个脚本，浏览器必须停止解析，下载脚本并运行它. 只有在此之后，它才能继续解析, 因为JavaScript程序可以改变网页(HTML)的内容, 特别是). 这就是为什么 JS称为解析器阻塞.

一旦所有解析完成, 浏览器已经构建了文档对象模型(DOM)和层叠样式表对象模型(CSSOM). 将它们组合在一起就得到了渲染树. 页面中未显示的部分不会进入渲染树, 因为它只包含绘制页面所需的数据.

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

最后，最后一步是油漆. 它包括根据浏览器在前几个阶段计算的数据对像素进行着色.

优化-related结论

你们可以猜到, 网站性能优化的过程涉及到网站的变化，减少:

• 必须传输的数据量
• 浏览器必须下载的资源数量(特别是阻塞的资源)
• CRP的长度

进一步, 我们将深入研究它是如何完成的细节, 但首先, 有一条重要的规则需要遵守.

如何衡量绩效

优化的一个重要规则是:先测量，再根据需要进行优化. 大多数浏览器的开发工具都有一个名为 表演。这就是测量发生的地方. 当优化最快的初始(第一次)渲染, 最重要的是要看以下事件的时间:

• 第一次油漆
• 第一个内容油漆
• 第一次有意义的绘画

这里，“Paint”表示页面的成功渲染，这是关键渲染路径的最后一个阶段. 一些渲染可能会一个接一个地发生，因为浏览器试图尽快显示一些内容并稍后更新.

除了渲染时间, 还有其他最重要的事情需要考虑, 使用了多少阻塞资源，下载它们需要多长时间. 测量完成后，可以在表演。选项卡中找到此信息.

性能优化策略

根据我们上面学到的, 网站性能优化主要有三种策略:

1. 最大限度地减少通过电线传输的数据量，
2. 减少要通过网络传输的资源总数，以及
3. 缩短关键渲染路径

1. 尽量减少要传输的数据量

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

然后，我建议设置一个自动的缩小过程. 例如, 它应该从你的后端服务中删除所有的注释(但不是源代码)和每个没有附加信息的字符(比如JS中的空白字符)。.

完成后，我们剩下的可以作为文本. 这意味着我们可以安全地应用像GZIP这样的压缩算法(大多数浏览器都能理解).

最后是缓存. 它在浏览器第一次呈现页面时不会有什么帮助，但它将为后续访问节省很多时间. 记住两件事是至关重要的:

• 如果您使用CDN，请确保支持缓存并正确设置缓存.
• 而不是等待资源的到期日期到来, 您可能希望有一种方法可以从您这边更早地更新它. 将文件的“指纹”嵌入到它们的url中，以便能够 本地缓存无效.

当然，应该为每个资源定义缓存策略. 有些人可能很少改变或根本不会改变. 其他的变化更快. 其中一些包含敏感信息，其他可能被视为公开信息. 使用 “私人”指令 以防止cdn缓存私人数据.

优化网页图像也可以做到, 尽管图像请求不会阻止解析或呈现.

2. 减少关键资源的总数

“关键”仅指网页正确呈现所需的资源. 因此，我们可以跳过所有不直接涉及流程的样式. 还有所有的剧本.

样式表

为了告诉浏览器不需要特定的CSS文件，我们应该设置 媒体 属性设置为所有引用样式表的链接. 使用这种方法，浏览器将只处理与当前资源匹配的资源 媒体 (设备类型, 屏幕尺寸), 同时降低所有其他样式表的优先级(它们无论如何都会被处理), 但不是作为关键渲染路径的一部分). 例如，如果添加 媒体= "打印" 属性于 style 标记，该标记引用用于打印页面的样式, 当媒体不在时，这些样式不会干扰你的关键渲染路径 打印 (i.e.，当在浏览器中显示页面时).

为了进一步改进这个过程，您还可以使一些样式内联. 这至少节省了我们到服务器的一次往返，否则就需要获取样式表.

脚本

如上所述，脚本是解析器阻塞的，因为它们可以更改DOM和CSSOM. 因此，脚本做 不 更改它们不应该是块解析，从而节省我们的时间.

为了实现这一点，所有的脚本标签都必须用属性来标记 异步 or 推迟.

标有 异步 不阻止DOM构建或CSSOM，因为它们可以在CSSOM构建之前执行. 但请记住，除非将内联脚本置于CSS之上，否则它们无论如何都会阻止CSSOM.

相比之下，标记为 推迟 会在页面加载结束时进行评估吗. 因此，它们不应该影响文档(否则，它将触发重新呈现)。.

换句话说，用 推迟，直到触发页面加载事件之后才执行脚本，而 异步 让脚本在文档被解析时在后台运行.

3. 缩短关键渲染路径长度

最后，CRP长度应尽可能缩短到最小. 在某种程度上，上述方法将做到这一点.

将媒体查询作为样式标签的属性将减少必须下载的资源总数. 脚本标签属性 推迟 和 异步 会阻止相应的脚本阻止解析吗.

缩小, 压缩, 使用GZIP归档资源将减少传输数据的大小(从而也减少了数据传输时间)。.

内联一些样式和脚本可以减少浏览器和服务器之间的往返次数.

我们还没有讨论的是在文件之间重新排列代码的选项. 根据最佳表现的最新理念, 网站应该最快做的第一件事就是显示ATF内容. ATF代表上面. 这是不需要滚动就能看到的区域. 因此, 最好重新安排与渲染相关的所有内容，以便首先加载所需的样式和脚本, 其他一切都停止——既不解析也不呈现. 永远记得在你做出改变之前和之后进行测量.

结论:优化包含整个堆栈

总之, 网站性能优化包含了网站响应的各个方面, 比如缓存, 设置CDN, 重构, 资源优化等, 然而，所有这些都可以逐步完成. 作为一个 web开发人员, 你应该把这篇文章作为参考, 永远记得在实验前后测量你的表现.

浏览器开发人员尽最大努力优化你访问的每个页面的网站性能, 这就是为什么浏览器通常实现所谓的“预加载器”.这部分程序扫描你在HTML中请求的资源，以便一次发出多个请求，并使它们并行运行. 这就是为什么在HTML中最好让样式标签彼此靠近(逐行)的原因。, 以及脚本标签.

此外, 尝试批量更新HTML，以避免多个布局事件, 它们不仅由DOM或CSSOM的变化触发，而且还由设备方向变化和窗口大小调整触发.

有用的资源和进一步阅读:

• PageSpeed见解
• 通过谷歌的pagespedinesassessment
• 缓存清单
• 一种方法 测试 如果您的网站启用了GZIP
• 高性能浏览器网络:伊利亚·格里戈瑞克的一本书