Long Animation Frame API 现已发布

Barry Pollard

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

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

LoAF 在 web-vitals JavaScript 库中提供

web-vitals JavaScript 库的版本 4 包含与 INP 互动相关的长动画帧（或帧），如在现场查找运行缓慢的互动指南中所记录的那样，以包含有关如何利用 LoAF 的信息。

在 2024 年 Google I/O 大会上，我们在用于调试 INP 的新现场数据分析演讲中介绍了这些信息，包括利用 LoAF 来识别导致 INP 互动速度变慢的其他脚本。

直接在库中集成此 API 后，使用此 API 的 RUM 合作伙伴便可公开此类数据，包括 RUMVision 和 DebugBear 等。这也为希望将其添加到自己产品中的其他 RUM 提供商提供了一个开源参考实现。

Web Vitals 扩展程序中提供 LoAF

Core Web Vitals 扩展程序已更新，其中包含长动画帧数据，可帮助您调试 INP 互动：

Web Vitals 扩展程序控制台日志记录。
“网页指标”扩展程序控制台日志记录会显示 LoAF 数据。

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

更新了有关使用 LoAF 的指南

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

网页上长动画帧的示例，其中突出显示了 INP LoAF。
网页可能包含多个 LoAF，其中一个与 INP 互动相关。

这些指南基于我们在实际中观察到的此 API 的使用方式，例如 Taboola 的此案例研究。我们正在制作其他一些案例，并期待日后发布更多类似的示例。

此外，我们还在 MDN 上记录了该 API。

总结

Long Animation Frames API 是 Web 平台上令人兴奋的新功能，我们已经看到许多网站在该 API 的试用阶段就开始使用它来改进自己的网站。我们期待该 API 在工具中的采用范围更广，并希望借助该 API 提高网站的响应速度。