2022前端开发回顾：Web性能方面有哪些新功能？

2023-04-2308:44:14WEB前端开发Comments729 views字数 2201阅读模式

衡量和优化网站速度的方式总是在变化。因为有新的Web标准被引入（并最终得到广泛支持），新的工具被开发，新的度量标准被提出。本文介绍了2022年Web性能格局发生变化的事项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

优先级提示

优先级提示是我今年见过的影响最大的浏览器功能，在优化LCP（Largest Contentful Paint）时只需将fetchpriority="high"属性添加到您最重要的图像：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

<img src="/hero.png" fetchpriority="high">

这将告诉浏览器在加载低优先级资源之前发出此请求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

默认情况下，图像请求的优先级较低，渲染页面后，折叠上方图像的优先级会增加。添加fetchpriority=high意味着浏览器可以立即启动图像请求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome中不再有OSCP请求

在线证书状态协议（OCSP）允许浏览器检查给定的SSL证书是否已被吊销。如果网站使用扩展验证证书，则Chrome在建立连接时会进行这些检查。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

下面的请求瀑布显示了作为SSL连接（紫色）的一部分的OCSP请求（灰色）的示例。基本上，第二个请求是作为HTML文档请求的一部分进行的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome 在 106 版本中停止了OSCP请求。对于使用扩展验证证书的站点，这提供了显著的性能改进。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

与下一次绘制的交互

Interaction to Next Paint（INP）是Google的一项新指标，用于衡量页面对用户输入的响应速度。它测量用户交互（如单击或按键）与下一次屏幕更新之间的时间间隔。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

INP可能最终取代第一输入延迟（FID）作为网页核心性能指标之一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

由于INP还包括处理时间和呈现延迟，因此它具有比第一输入延迟更高的值。它还查看最慢的页面交互之一，不像FID只查看第一个页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome中的后退/前进缓存

许多页面导航只是浏览器历史记录中的向后/向前移动。移动的浏览器长期以来一直试图通过保存页面状态并恢复它来加速这些导航。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome的后退/前进缓存现在已经在移动的和桌面上全面推出。从技术上讲，这一变化发生在2021年11月，但值得强调的是，积极影响直到今年才完全显现出来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

HTTP/3标准化

浏览器长期以来一直在试验 HTTP/3协议，但最终还是标准化2022年6月。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

HTTP/3实现了几个性能目标，例如减少建立连接的网络往返次数，并使移动的用户在不同网络之间移动时更容易迁移连接。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

关于哪些请求阻止了渲染

渲染块的请求对于性能是重要的，因为它们的阻止呈现将影响整个页面。但有时很难识别。幸运的是，Chrome已经开始报告有关请求是否被渲染阻止的更多细节，如下图所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Resource Timing API 现在也会报告renderBlockingStatus属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

DevTools中新的Performance Insights选项卡也显示了这些数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome DevTools性能洞察面板

DevTools Performance选项卡显示了一个网站的真正全面的视图，但它并没有对信息进行优先级排序和生成见解。Chrome DevTools中新的 Performance Insights 选项卡旨在更轻松地识别影响网站性能的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

它显示了一系列与性能相关的洞察，然后提出了可能的修复建议。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

103状态码

浏览器资源提示告诉浏览器在需要资源之前加载资源或创建服务器连接。103 HTTP状态码允许Web服务器在完整的HTML响应准备好之前告诉浏览器未来需要的资源。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

这样，浏览器可以在服务器仍在处理请求时开始加载这些资源。例如，渲染阻止样式表或Web字体可以提前开始加载，或者浏览器可以预连接到API子域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

这在使用CDN时尤其有用。CDN提供与用户的位置紧密相关的服务器。在将文档请求发送到主网站服务器进行处理之前，它可以在几毫秒内返回一个早期的103响应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

Chrome中的全页预渲染

有时用户很可能很快就会导航到一个新页面，自11月发布108版以来，Chrome将在实际导航之前开始加载页面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

当导航发生时，在后台加载的页面被“前景化”，可能会立即呈现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html

例如，当我在地址栏中输入“ads”时，Chrome有83%的把握认为我将访问ads.twitter.com，因此当我开始输入时，它会预加载该页面。（查看chrome://predictors/以查看有关您自己的浏览行为的信息。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/36599.html