PerformanceLongAnimationFrameTiming
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Giao diện PerformanceLongAnimationFrameTiming được chỉ định trong Long Animation Frames API và cung cấp số liệu về các khung hoạt hình dài (LoAF) chiếm dụng kết xuất và ngăn các tác vụ khác thực thi.
Mô tả
Các khung hoạt hình dài (LoAF) là các bản cập nhật kết xuất bị trì hoãn vượt quá 50ms. LoAF có thể dẫn đến các bản cập nhật giao diện người dùng (UI) chậm, khiến các điều khiển có vẻ không phản hồi và gây ra hiệu ứng hoạt hình và cuộn giật cục (không mượt mà). Điều này thường dẫn đến sự thất vọng của người dùng.
Giao diện PerformanceLongAnimationFrameTiming cung cấp bộ thông tin chi tiết sau về LoAF, cho phép các nhà phát triển thu hẹp nguyên nhân gốc rễ:
- Bộ timestamps chi tiết cho từng LoAF.
- Thông tin chi tiết về mỗi script góp phần tạo ra LoAF, thông qua thuộc tính
PerformanceLongAnimationFrameTiming.scripts. Thuộc tính này trả về một mảng các đối tượngPerformanceScriptTiming, mỗi đối tượng cho mỗi script.
PerformanceLongAnimationFrameTiming kế thừa từ PerformanceEntry.
Thuộc tính phiên bản
Giao diện này trực tiếp định nghĩa các thuộc tính sau:
PerformanceLongAnimationFrameTiming.blockingDurationRead only Thử nghiệm-
Trả về
DOMHighResTimeStampcho biết tổng thời gian tính bằng mili giây mà luồng chính bị chặn không phản hồi các tác vụ ưu tiên cao, chẳng hạn như đầu vào người dùng. PerformanceLongAnimationFrameTiming.firstUIEventTimestampRead only Thử nghiệm-
Trả về
DOMHighResTimeStampcho biết thời gian của sự kiện UI đầu tiên (chẳng hạn như sự kiện chuột hoặc bàn phím) được xếp hàng trong khung hoạt hình hiện tại. PerformanceLongAnimationFrameTiming.paintTime-
Trả về
timestampkhi giai đoạn kết xuất kết thúc và khung hoạt hình bắt đầu. PerformanceLongAnimationFrameTiming.presentationTime-
Trả về
timestampkhi bản cập nhật UI thực sự được vẽ lên màn hình. PerformanceLongAnimationFrameTiming.renderStartRead only Thử nghiệm-
Trả về
DOMHighResTimeStampcho biết thời gian bắt đầu của chu kỳ kết xuất, bao gồm các callbackWindow.requestAnimationFrame(), tính toán style và layout, các callbackResizeObservervà các callbackIntersectionObserver. PerformanceLongAnimationFrameTiming.scriptsRead only Thử nghiệm-
Trả về một mảng các phiên bản
PerformanceScriptTiming. PerformanceLongAnimationFrameTiming.styleAndLayoutStartRead only Thử nghiệm-
Trả về
DOMHighResTimeStampcho biết điểm bắt đầu của khoảng thời gian dành cho các tính toán style và layout cho khung hoạt hình hiện tại.
Nó cũng mở rộng các thuộc tính PerformanceEntry sau, đủ điều kiện và ràng buộc chúng như được mô tả:
PerformanceEntry.durationRead only Thử nghiệm-
Trả về
DOMHighResTimeStampđại diện cho thời gian tính bằng mili giây để xử lý LoAF hoàn toàn. PerformanceEntry.entryTypeRead only Thử nghiệm-
Trả về loại mục, luôn là
"long-animation-frame". PerformanceEntry.nameRead only Thử nghiệm-
Trả về tên mục, luôn là
"long-animation-frame". PerformanceEntry.startTimeRead only Thử nghiệm-
Trả về
DOMHighResTimeStampđại diện cho thời gian khi khung hoạt hình bắt đầu.
Phương thức phiên bản
PerformanceLongAnimationFrameTiming.toJSON()Thử nghiệm-
Trả về biểu diễn JSON của đối tượng
PerformanceLongAnimationFrameTiming.
Ví dụ
Xem Long animation frame timing để biết các ví dụ liên quan đến Long Animation Frames API.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Long Animation Frames API> # sec-PerformanceLongAnimationFrameTiming> |