Long Animation Frame API 现已发布

Barry Pollard

浏览器支持

• 123
• 123
• x
• x

来源

Long Animation Frame API（LoAF 发音为 Lo-Af）已从 Chrome 123 开始提供，我们现在还更新了工具和指南，以帮助您充分利用以下新 API。

web-vitals JavaScript 库提供 LoAF

Web-Vitals JavaScript 库第 4 版包含与 INP 互动相关的长动画帧（或多帧），如查找现场慢速互动指南中所述，包含有关如何利用 LoAF 的信息。

在 2024 年 Google I/O 大会上，我们在用于调试 INP 的新领域数据分析讲座中介绍了这些信息，包括利用 LoAF 找出减慢 INP 互动速度的其他脚本。

将 API 直接集成到库中，让 RUM 合作伙伴（包括 RUMVision 和 DebugBear 等）使用此 API 来公开这些数据。这也为其他 RUM 提供商提供开源参考实现，帮助他们将其产品用于自己的产品。

可在 Web Vitals 扩展程序中使用 LoAF

Web Vitals 扩展程序已更新，现在包含长动画帧数据，以帮助您调试 INP 互动：

Web Vitals Extension 控制台日志记录会显示 LoAF 数据。

这有助于您了解互动时还有哪些其他脚本正在运行，这些脚本通常是导致延迟的原因（尤其是输入延迟），但到目前为止，使用该扩展程序时很难诊断。

更新后的 LoAF 使用指南

我们还更新了 Long Animation Frames API 主要文档中的指南，以帮助您充分利用此 API。

一个网页可能有多个 LoAF，其中一个与 INP 互动相关。

本指南基于此 API 在实际应用中的使用情况，例如 Taboola 的这份案例研究。我们正在制作大量其他案例研究，期待今后能够发布更多此类示例。

此外，我们还在 MDN 上介绍了此 API。

总结

Long Animation Frames API 对网络平台来说是一个激动人心的补充，我们已经看到许多网站使用此 API 来改进其网站，即使在试用阶段也是如此。我们期待在工具中更多地采用该 API，并借助此 API 提高网站的响应速度。