Long Animation Frame API hiện đã được vận chuyển

Barry Pollard

Browser Support

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

Source

API Khung ảnh động dài (LoAF – phát âm là Lo-Af) đã được phát hành từ Chrome 123 và chúng tôi cũng đã cập nhật công cụ và hướng dẫn để giúp bạn khai thác tối đa API mới này.

LoAF có trong thư viện JavaScript web-vitals

Phiên bản 4 của thư viện JavaScript web-vitals bao gồm khung ảnh động dài (hoặc các khung) liên quan đến lượt tương tác INP như được ghi nhận trong hướng dẫn Tìm lượt tương tác chậm trong thực tế để cung cấp thông tin về cách tận dụng LoAF.

Tại Google I/O 2024, chúng tôi đã trình bày thông tin này trong buổi trò chuyện Thông tin chi tiết mới về trường để gỡ lỗi INP, bao gồm cả việc tận dụng LoAF để xác định các tập lệnh khác làm chậm hoạt động tương tác với INP.

Việc tích hợp API trực tiếp vào thư viện cho phép các đối tác RUM sử dụng API này để hiển thị dữ liệu này, bao gồm cả các đối tác như RUMVision và DebugBear. Điều này cũng cung cấp một phương thức triển khai tham chiếu nguồn mở cho các nhà cung cấp RUM khác muốn thêm phương thức này vào sản phẩm của riêng họ.

LoAF có trong Tiện ích Web Vitals

Tiện ích Web Vitals đã được cập nhật để thêm dữ liệu khung ảnh động dài nhằm giúp bạn gỡ lỗi các lượt tương tác INP:

Ghi nhật ký bảng điều khiển của Tiện ích Web Vitals.
Công cụ ghi nhật ký của Tiện ích Web Vitals hiển thị dữ liệu LoAF.

Điều này hữu ích để xem những tập lệnh nào khác đang chạy tại thời điểm bạn tương tác, thường là nguyên nhân gây ra độ trễ (đặc biệt là độ trễ đầu vào) nhưng cho đến nay vẫn khó chẩn đoán khi sử dụng tiện ích.

Hướng dẫn mới về cách sử dụng LoAF

Chúng tôi cũng đã cập nhật hướng dẫn trong tài liệu chính về API Khung ảnh động dài để giúp bạn khai thác tối đa API này.

Ví dụ về các khung ảnh động dài trên một trang, trong đó LoAF INP được làm nổi bật.
Một trang có thể có nhiều LoAF, trong đó một LoAF liên quan đến lượt tương tác INP.

Hướng dẫn này dựa trên cách chúng tôi thấy API này được sử dụng trong thực tế, ví dụ: trong nghiên cứu điển hình này của Taboola. Chúng tôi đang thực hiện một số nghiên cứu điển hình khác và rất mong có thể xuất bản thêm nhiều ví dụ như thế này trong tương lai.

Ngoài ra, chúng tôi cũng đã ghi lại API trên MDN.

Kết luận

API Khung ảnh động dài là một tính năng bổ sung thú vị cho nền tảng web và chúng tôi đã thấy một số trang web sử dụng API này để cải thiện trang web của họ ngay cả trong giai đoạn thử nghiệm. Chúng tôi mong muốn API này được áp dụng rộng rãi hơn trong công cụ và cải thiện khả năng phản hồi trên các trang web.