共计 2309 个字符，预计需要花费 6 分钟才能阅读完成。
本文翻译自 2022-in-web-performance，略有删改
咱们掂量和优化网站速度的形式总是在变动。因为有新的 Web 规范被引入（并最终失去广泛支持），新的工具被开发，新的度量规范被提出。本文介绍了 2022 年 Web 性能格局发生变化的事项。
优先级提醒
优先级提醒是我往年见过的影响最大的浏览器性能，在优化 LCP（Largest Contentful Paint）时只需将 fetchpriority="high" 属性增加到您最重要的图像：
<img src="/hero.png" fetchpriority="high">这将通知浏览器在加载低优先级资源之前收回此申请。
默认状况下，图像申请的优先级较低，渲染页面后，折叠上方图像的优先级会减少。增加 fetchpriority=high 意味着浏览器能够立刻启动图像申请。
Chrome 中不再有 OSCP 申请
在线证书状态协定（OCSP）容许浏览器查看给定的 SSL 证书是否已被撤消。如果网站应用扩大验证证书，则 Chrome 在建设连贯时会进行这些查看。
上面的申请瀑布显示了作为 SSL 连贯（紫色）的一部分的 OCSP 申请（灰色）的示例。基本上，第二个申请是作为 HTML 文档申请的一部分进行的。
Chrome 在 106 版本中进行了 OSCP 申请。对于应用扩大验证证书的站点，这提供了显著的性能改良。
与下一次绘制的交互
Interaction to Next Paint（INP）是 Google 的一项新指标，用于掂量页面对用户输出的响应速度。它测量用户交互（如单击或按键）与下一次屏幕更新之间的工夫距离。
INP 可能最终取代第一输出提早（FID）作为网页外围性能指标之一。
因为 INP 还包含解决工夫和出现提早，因而它具备比第一输出提早更高的值。它还查看最慢的页面交互之一，不像 FID 只查看第一个页面。
Chrome 中的后退 / 后退缓存
许多页面导航只是浏览器历史记录中的向后 / 向前挪动。挪动的浏览器长期以来始终试图通过保留页面状态并复原它来减速这些导航。
Chrome 的后退 / 后退缓存当初曾经在挪动的和桌面上全面推出。从技术上讲，这一变动产生在 2021 年 11 月，但值得强调的是，踊跃影响直到往年才齐全显现出来。
HTTP/ 3 标准化
浏览器长期以来始终在试验 HTTP/ 3 协定，但最终还是 标准化 2022 年 6 月。
HTTP/ 3 实现了几个性能指标，例如缩小建设连贯的网络往返次数，并使挪动的用户在不同网络之间挪动时更容易迁徙连贯。
对于哪些申请阻止了渲染
渲染块的申请对于性能是重要的，因为它们的阻止出现将影响整个页面。但有时很难辨认。侥幸的是，Chrome 曾经开始报告无关申请是否被渲染阻止的更多细节，如下图所示：
Resource Timing API 当初也会报告 renderBlockingStatus 属性。
DevTools 中新的 Performance Insights 选项卡也显示了这些数据。
Chrome DevTools 性能洞察面板
DevTools Performance 选项卡显示了一个网站的真正全面的视图，但它并没有对信息进行优先级排序和生成见解。Chrome DevTools 中新的 Performance Insights 选项卡旨在更轻松地辨认影响网站性能的问题。
它显示了一系列与性能相干的洞察，而后提出了可能的修复倡议。
103 状态码
浏览器资源提醒通知浏览器在须要资源之前加载资源或创立服务器连贯。103 HTTP 状态码容许 Web 服务器在残缺的 HTML 响应筹备好之前通知浏览器将来须要的资源。
这样，浏览器能够在服务器仍在解决申请时开始加载这些资源。例如，渲染阻止样式表或 Web 字体能够提前开始加载，或者浏览器能够预连贯到 API 子域。
这在应用 CDN 时尤其有用。CDN 提供与用户的地位严密相干的服务器。在将文档申请发送到主网站服务器进行解决之前，它能够在几毫秒内返回一个晚期的 103 响应。
Chrome 中的全页预渲染
有时用户很可能很快就会导航到一个新页面，自 11 月公布 108 版以来，Chrome 将在理论导航之前开始加载页面。
当导航产生时，在后盾加载的页面被“前景化”，可能会立刻出现。
例如，当我在地址栏中输出“ads”时，Chrome 有 83% 的把握认为我将拜访 ads.twitter.com，因而当我开始输出时，它会预加载该页面。（查看 chrome://predictors/ 以查看无关您本人的浏览行为的信息。）
网站还能够应用揣测规定 API 来通知浏览器可能行将到来的导航。
Safari 中的 AVIF 反对
WebP 和 AVIF 等古代图像格式能够通过将雷同的信息编码在较小的文件中来显著进步网站的速度。
尽管 WebP 曾经被广泛支持了两年多，但 AVIF 反对直到往年 9 月 iOS 16 和 macOS Ventura 公布时才呈现在 Safari 中。
AVIF 在压缩低保真图像时特地杰出，这意味着当您想要在网站上显示照片并保留带宽时，它是一个很好的抉择。
请留神并非每个 Safari 用户都已降级，Edge 依然不反对 AVIF。
Safari 中的本机图像提早加载
图像提早加载确保图像仅在行将进入视口时加载，从而节俭带宽并优先解决更重要的页面内容。
自从公布 iOS 15.4 这个 March Safari 当初也反对 loading="lazy" 属性。当初所有支流浏览器都反对它，并且全局反对 92% 的用户.
最初
在过来的一年里，许多新的浏览器性能曾经能够用来进步网站的性能。咱们也有新的工具来掂量和进步网站的速度，在此也期待 2023 年 Web 性能的新的倒退。看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
