关于前端:回顾2022Web性能方面有哪些新功能

本文翻译自 2022-in-web-performance，略有删改

咱们掂量和优化网站速度的形式总是在变动。因为有新的Web规范被引入（并最终失去广泛支持），新的工具被开发，新的度量规范被提出。本文介绍了2022年Web性能格局发生变化的事项。

优先级提醒是我往年见过的影响最大的浏览器性能，在优化LCP（Largest Contentful Paint）时只需将fetchpriority="high"属性增加到您最重要的图像：

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

这将通知浏览器在加载低优先级资源之前收回此申请。

默认状况下，图像申请的优先级较低，渲染页面后，折叠上方图像的优先级会减少。增加fetchpriority=high意味着浏览器能够立刻启动图像申请。

在线证书状态协定（OCSP）容许浏览器查看给定的SSL证书是否已被撤消。如果网站应用扩大验证证书，则Chrome在建设连贯时会进行这些查看。

上面的申请瀑布显示了作为SSL连贯（紫色）的一部分的OCSP申请（灰色）的示例。基本上，第二个申请是作为HTML文档申请的一部分进行的。

Chrome 在 106 版本中进行了OSCP申请。对于应用扩大验证证书的站点，这提供了显著的性能改良。

Interaction to Next Paint（INP）是Google的一项新指标，用于掂量页面对用户输出的响应速度。它测量用户交互（如单击或按键）与下一次屏幕更新之间的工夫距离。

INP可能最终取代第一输出提早（FID）作为网页外围性能指标之一。

因为INP还包含解决工夫和出现提早，因而它具备比第一输出提早更高的值。它还查看最慢的页面交互之一，不像FID只查看第一个页面。

许多页面导航只是浏览器历史记录中的向后/向前挪动。挪动的浏览器长期以来始终试图通过保留页面状态并复原它来减速这些导航。

Chrome的后退/后退缓存当初曾经在挪动的和桌面上全面推出。从技术上讲，这一变动产生在2021年11月，但值得强调的是，踊跃影响直到往年才齐全显现出来。

浏览器长期以来始终在试验 HTTP/3协定，但最终还是标准化2022年6月。

HTTP/3实现了几个性能指标，例如缩小建设连贯的网络往返次数，并使挪动的用户在不同网络之间挪动时更容易迁徙连贯。

渲染块的申请对于性能是重要的，因为它们的阻止出现将影响整个页面。但有时很难辨认。侥幸的是，Chrome曾经开始报告无关申请是否被渲染阻止的更多细节，如下图所示：

Resource Timing API 当初也会报告renderBlockingStatus属性。

DevTools中新的Performance Insights选项卡也显示了这些数据。

DevTools Performance选项卡显示了一个网站的真正全面的视图，但它并没有对信息进行优先级排序和生成见解。Chrome DevTools中新的 Performance Insights 选项卡旨在更轻松地辨认影响网站性能的问题。

它显示了一系列与性能相干的洞察，而后提出了可能的修复倡议。

浏览器资源提醒通知浏览器在须要资源之前加载资源或创立服务器连贯。103 HTTP状态码容许Web服务器在残缺的HTML响应筹备好之前通知浏览器将来须要的资源。

这样，浏览器能够在服务器仍在解决申请时开始加载这些资源。例如，渲染阻止样式表或Web字体能够提前开始加载，或者浏览器能够预连贯到API子域。

这在应用CDN时尤其有用。CDN提供与用户的地位严密相干的服务器。在将文档申请发送到主网站服务器进行解决之前，它能够在几毫秒内返回一个晚期的103响应。

有时用户很可能很快就会导航到一个新页面，自11月公布108版以来，Chrome将在理论导航之前开始加载页面。

当导航产生时，在后盾加载的页面被“前景化”，可能会立刻出现。

例如，当我在地址栏中输出“ads”时，Chrome有83%的把握认为我将拜访ads.twitter.com，因而当我开始输出时，它会预加载该页面。（查看chrome://predictors/以查看无关您本人的浏览行为的信息。）

网站还能够应用揣测规定API来通知浏览器可能行将到来的导航。

WebP 和AVIF等古代图像格式能够通过将雷同的信息编码在较小的文件中来显著进步网站的速度。

尽管WebP曾经被广泛支持了两年多，但AVIF反对直到往年9月iOS 16和macOS Ventura公布时才呈现在Safari中。

AVIF在压缩低保真图像时特地杰出，这意味着当您想要在网站上显示照片并保留带宽时，它是一个很好的抉择。

请留神并非每个Safari用户都已降级，Edge依然不反对AVIF。

图像提早加载确保图像仅在行将进入视口时加载，从而节俭带宽并优先解决更重要的页面内容。

自从公布 iOS 15.4这个March Safari当初也反对loading="lazy"属性。当初所有支流浏览器都反对它，并且全局反对 92%的用户.

在过来的一年里，许多新的浏览器性能曾经能够用来进步网站的性能。咱们也有新的工具来掂量和进步网站的速度，在此也期待2023年Web性能的新的倒退。看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）