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 合作夥伴使用此 API 公開此資料，包括 RUMVision 及 DebugBear 的喜歡。這也讓其他 RUM 供應商對他們的產品進行了開放原始碼參考實作。

Web Vitals 擴充功能現在提供 LoAF

Web Vitals 擴充功能已更新，現在納入長動畫影格資料，可協助您對 INP 互動進行偵錯：

Web Vitals 擴充功能控制台記錄功能。
Web Vitals 擴充功能主控台記錄會顯示 LoAF 資料，

有助於瞭解互動當下正在執行的其他指令碼，因為這些指令碼通常是延遲的原因 (尤其是輸入延遲)，但到目前為止無法診斷使用擴充功能時。

更新使用 LoAF 的指南

此外，我們也在主要的 Long Animation Frames API 文件中更新指南，協助您充分運用這個 API。

網頁上的長動畫影格範例，醒目顯示的項目為 INP LoAF。
一個網頁可能會有多個 LoAF，其中一個與 INP 互動有關。

本指南是以我們在相關領域使用 API 的方式為基礎，例如此工具中的 Taboola 的個案研究。我們正在進行一些其他個案研究，希望日後能發布更多類似的範例。

此外，我們也在 MDN 上記錄了 API。

結論

Long Animation Frames API 是網路平台的新增功能，已見過許多網站使用此 API 來改善其網站，而且在試用階段亦然。我們希望這個 API 能協助更多人採用此 API 開發工具，並改善網站的回應速度。