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

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

Critical Rendering Path

关键呈现路径(CRP)是浏览器将代码转换为屏幕上可显示像素的过程. It has several stages, 其中一些可以并行执行以节省时间, but some parts have to be done consequentially. Here it is visualized:

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

If it’s a stylesheet file, 浏览器必须在呈现页面之前完全解析它, 和 that’s why CSS is said to be render blocking.

如果它是一个脚本，浏览器必须停止解析，下载脚本并运行它. Only after that can it continue parsing, 因为JavaScript程序可以改变网页(HTML)的内容, in particular). And that’s why JS is called parser blocking.

Once all the parsing is done, 浏览器已经构建了文档对象模型(DOM)和层叠样式表对象模型(CSSOM). Combining them together gives the Render Tree. 页面中未显示的部分不会进入渲染树, 因为它只包含绘制页面所需的数据.

倒数第二步是将渲染树转换为布局. This stage is also called Reflow. 这就是计算每个渲染树节点的每个位置及其大小的地方.

Finally, the last step is Paint. 它包括根据浏览器在前几个阶段计算的数据对像素进行着色.

Optimization-related Conclusions

As you can guess, 网站性能优化的过程涉及到网站的变化，减少:

• The amount of data that has to be transferred
• 浏览器必须下载的资源数量(特别是阻塞的资源)
• The length of CRP

进一步, we’ll dive into the details of how it’s done, 但首先, there is an important rule to observe.

How To Measure Performance

优化的一个重要规则是:先测量，再根据需要进行优化. 大多数浏览器的开发工具都有一个名为 Performance, 和 that’s where the measurements happen. 当优化最快的初始(第一次)渲染, 最重要的是要看以下事件的时间:

• First Paint
• First Contentful Paint
• First Meaningful Paint

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

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

Performance Optimization Strategies

Given what we’ve learned above, 网站性能优化主要有三种策略:

1. 最大限度地减少通过电线传输的数据量，
2. 减少要通过网络传输的资源总数，以及
3. Shortening the critical rendering path

1. Minimize the Amount of Data To Be Transferred

First of all, remove all unused parts, such as unreachable functions in JavaScript, 样式的选择器从不匹配任何元素, 和 HTML tags that are forever hidden with CSS. Secondly, remove all duplicates.

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

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

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

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

当然，应该为每个资源定义缓存策略. Some might rarely change or never change at all. Others are changing faster. 其中一些包含敏感信息，其他可能被视为公开信息. 使用 “private” directive to keep CDNs from caching private data.

Optimizing web images could also be done, 尽管图像请求不会阻止解析或呈现.

2. Reduce the Total Count of Critical Resources

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

Stylesheets

为了告诉浏览器不需要特定的CSS文件，我们应该设置 媒体 属性设置为所有引用样式表的链接. 使用这种方法，浏览器将只处理与当前资源匹配的资源 媒体 (device type, screen size) as necessary, 同时降低所有其他样式表的优先级(它们无论如何都会被处理), but 不 as part of the critical rendering path). For example, if you add the 媒体="打印" attribute to the style 标记，该标记引用用于打印页面的样式, 当媒体不在时，这些样式不会干扰你的关键渲染路径 打印 (i.e., when displaying the page in a browser).

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

脚本

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

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

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

By contrast, scripts marked with 推迟 will be evaluated at the end of the page load. 因此，它们不应该影响文档(否则，它将触发重新呈现)。.

In other words, with 推迟，直到触发页面加载事件之后才执行脚本，而 异步 让脚本在文档被解析时在后台运行.

3. Shorten the Critical Rendering Path Length

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

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

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

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

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

结论:优化包含整个堆栈

总之, 网站性能优化包含了网站响应的各个方面, such as caching, setting up a CDN, refactoring, resources optimization 和 others, however all of this can be done gradually. 作为一个 web developer, you should use this article as a reference, 永远记得在实验前后测量你的表现.

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

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

Useful resources 和 further reading:

• PageSpeed Insights
• Acing Google’s PageSpeed Insights Assessment
• Caching Checklist
• 一种方法 测试 if GZIP is enabled for your website
• High Performance Browser Networking: A book by Ilya Grigorik