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 控制台日志记录。](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-web-vitals-extension.png?hl=zh-cn)
这有助于您了解互动时还有哪些其他脚本正在运行,这些脚本通常是导致延迟的原因(尤其是输入延迟),但到目前为止,使用该扩展程序时很难诊断。
更新后的 LoAF 使用指南
我们还更新了 Long Animation Frames API 主要文档中的指南,以帮助您充分利用此 API。
![网页上的较长动画帧示例,其中突出显示了 INP LoAF。](https://developer.chrome.com/static/blog/loaf-has-shipped/image/loaf-inp.png?hl=zh-cn)
本指南基于此 API 在实际应用中的使用情况,例如 Taboola 的这份案例研究。我们正在制作大量其他案例研究,期待今后能够发布更多此类示例。
此外,我们还在 MDN 上介绍了此 API。
总结
Long Animation Frames API 对网络平台来说是一个激动人心的补充,我们已经看到许多网站使用此 API 来改进其网站,即使在试用阶段也是如此。我们期待在工具中更多地采用该 API,并借助此 API 提高网站的响应速度。