PerformanceEventTiming

Mô tả

API này cho phép theo dõi các sự kiện chậm bằng cách cung cấp dấu thời gian và thời lượng của sự kiện cho một số loại sự kiện nhất định (xem bên dưới). Ví dụ, bạn có thể đo thời gian giữa hành động người dùng và thời điểm bắt đầu chạy trình xử lý sự kiện của nó, hoặc thời gian mà trình xử lý sự kiện mất để chạy.

API này đặc biệt hữu ích để đo Interaction to Next Paint (INP): thời gian dài nhất (trừ một số ngoại lệ) từ thời điểm người dùng tương tác với ứng dụng của bạn cho đến khi trình duyệt thực sự có thể phản hồi tương tác đó.

Thông thường bạn làm việc với các đối tượng PerformanceEventTiming bằng cách tạo một phiên bản PerformanceObserver rồi gọi phương thức observe() của nó, truyền "event" hoặc "first-input" làm giá trị của tùy chọn type. Hàm callback của đối tượng PerformanceObserver sau đó sẽ được gọi với danh sách các đối tượng PerformanceEventTiming để bạn phân tích. Xem ví dụ bên dưới để biết thêm.

Theo mặc định, các mục PerformanceEventTiming được hiển thị khi duration của chúng là 104ms hoặc hơn. Nghiên cứu cho thấy rằng đầu vào người dùng không được xử lý trong vòng 100ms được coi là chậm và 104ms là bội số đầu tiên của 8 lớn hơn 100ms (vì lý do bảo mật, API này được làm tròn đến bội số gần nhất của 8ms). Tuy nhiên, bạn có thể đặt PerformanceObserver với một ngưỡng khác bằng cách sử dụng tùy chọn durationThreshold trong phương thức observe().

Giao diện này kế thừa các phương thức và thuộc tính từ lớp cha của nó, PerformanceEntry:

Các sự kiện được hiển thị

Các loại sự kiện sau được hiển thị bởi Event Timing API:

Lưu ý rằng các sự kiện sau không được bao gồm trong danh sách vì chúng là các sự kiện liên tục và không thể thu thập được số lượng sự kiện hoặc các chỉ số hiệu suất có ý nghĩa tại thời điểm này: mousemove, pointermove, pointerrawupdate, touchmove, wheel, drag.

Để có danh sách tất cả các sự kiện được hiển thị, bạn cũng có thể tra cứu các khóa trong map performance.eventCounts:

const exposedEventsList = [...performance.eventCounts.keys()];

Hàm khởi tạo

Giao diện này không có hàm khởi tạo riêng. Xem ví dụ bên dưới về cách thông thường để lấy thông tin mà giao diện PerformanceEventTiming chứa.

Thuộc tính phiên bản

Giao diện này mở rộng các thuộc tính PerformanceEntry sau đây cho các loại mục hiệu suất event timing bằng cách điều chỉnh chúng như sau:

PerformanceEntry.duration Read only

Trả về DOMHighResTimeStamp đại diện cho thời gian từ startTime đến lần vẽ render tiếp theo (làm tròn đến 8ms gần nhất).

PerformanceEntry.entryType Read only

Trả về "event" (cho các sự kiện dài) hoặc "first-input" (cho tương tác người dùng đầu tiên).

PerformanceEntry.name Read only

Trả về loại của sự kiện liên quan.

PerformanceEntry.startTime Read only

Trả về DOMHighResTimeStamp đại diện cho thuộc tính timestamp của sự kiện liên quan. Đây là thời điểm sự kiện được tạo ra và có thể được coi như một đại diện cho thời điểm tương tác người dùng xảy ra.

Giao diện này cũng hỗ trợ các thuộc tính sau:

PerformanceEventTiming.cancelable Read only

Trả về thuộc tính cancelable của sự kiện liên quan.

PerformanceEventTiming.interactionId Read only

Trả về ID xác định duy nhất tương tác người dùng đã kích hoạt sự kiện liên quan.

PerformanceEventTiming.processingStart Read only

Trả về DOMHighResTimeStamp đại diện cho thời điểm bắt đầu gửi sự kiện. Để đo thời gian giữa hành động người dùng và thời điểm trình xử lý sự kiện bắt đầu chạy, tính processingStart-startTime.

PerformanceEventTiming.processingEnd Read only

Trả về DOMHighResTimeStamp đại diện cho thời điểm kết thúc gửi sự kiện. Để đo thời gian trình xử lý sự kiện mất để chạy, tính processingEnd-processingStart.

PerformanceEventTiming.target Read only

Trả về mục tiêu cuối cùng của sự kiện liên quan, nếu nó không bị xóa.

Phương thức phiên bản

PerformanceEventTiming.toJSON()

Trả về biểu diễn JSON của đối tượng PerformanceEventTiming.

Ví dụ

Lấy thông tin event timing

Để lấy thông tin event timing, hãy tạo một phiên bản PerformanceObserver rồi gọi phương thức observe() của nó, truyền "event" hoặc "first-input" làm giá trị của tùy chọn type. Bạn cũng cần đặt buffered thành true để truy cập các sự kiện mà user agent đã đệm trong khi xây dựng tài liệu. Hàm callback của đối tượng PerformanceObserver sau đó sẽ được gọi với danh sách các đối tượng PerformanceEventTiming để bạn phân tích.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Full duration
    const duration = entry.duration;

    // Input delay (before processing event)
    const delay = entry.processingStart - entry.startTime;

    // Synchronous event processing time
    // (between start and end dispatch)
    const eventHandlerTime = entry.processingEnd - entry.processingStart;
    console.log(`Total duration: ${duration}`);
    console.log(`Event delay: ${delay}`);
    console.log(`Event handler duration: ${eventHandlerTime}`);
  });
});

// Register the observer for events
observer.observe({ type: "event", buffered: true });

Bạn cũng có thể đặt một durationThreshold khác. Giá trị mặc định là 104ms và ngưỡng thời lượng tối thiểu có thể là 16ms.

observer.observe({ type: "event", durationThreshold: 16, buffered: true });

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Intersection Observer API
• Page Visibility API