PerformanceEventTiming

描述

此 API 透過提供特定事件型別的事件時間戳和持續時間（見下文），從而實現了對慢速事件的可視性。例如，您可以監控使用者操作與其事件處理程式開始之間的時間，或者事件處理程式執行所需的時間。

此 API 對於測量使用者互動到下次繪製（INP）特別有用：這是從使用者與您的應用互動的那一刻到瀏覽器實際能夠響應該互動的那一刻之間（排除某些異常值）的最長時間。

您通常透過建立 PerformanceObserver 例項，然後呼叫其 observe() 方法，並將 "event" 或 "first-input" 作為 type 選項的值來處理 PerformanceEventTiming 物件。然後，PerformanceObserver 物件的回撥將以 PerformanceEventTiming 物件列表的形式被呼叫，您可以進行分析。有關更多資訊，請參閱下面的示例。

預設情況下，當 PerformanceEventTiming 條目的 duration 為 104ms 或更高時，它們會被公開。研究表明，未在 100ms 內處理的使用者輸入被認為是慢速的，而 104ms 是大於 100ms 的第一個 8 的倍數（出於安全原因，此 API 會四捨五入到最接近的 8ms 倍數）。但是，您可以使用 observe() 方法中的 durationThreshold 選項將 PerformanceObserver 設定為不同的閾值。

此介面繼承了其父級 PerformanceEntry 的方法和屬性。

公開的事件

Event Timing API 公開以下事件型別：

請注意，以下事件未包含在此列表中，因為它們是連續事件，在此階段無法獲得有意義的事件計數或效能指標：mousemove、pointermove、pointerrawupdate、touchmove、wheel、drag。

要獲取所有公開事件的列表，您還可以查詢 performance.eventCounts 對映中的鍵。

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

建構函式

此介面本身沒有建構函式。有關通常如何獲取 PerformanceEventTiming 介面所包含的資訊，請參閱下面的示例。

例項屬性

此介面透過以下方式擴充套件了其父級 PerformanceEntry 的屬性，以用於事件計時效能條目型別：

PerformanceEntry.duration 只讀

返回一個 DOMHighResTimeStamp，表示從 startTime 到下一次渲染繪製的時間（四捨五入到最接近的 8ms）。

PerformanceEntry.entryType 只讀

返回 "event"（對於長事件）或 "first-input"（對於首次使用者互動）。

PerformanceEntry.name 只讀

返回與事件關聯的事件型別。

PerformanceEntry.startTime 只讀

返回一個 DOMHighResTimeStamp，表示與事件關聯的 timestamp 屬性。這是事件建立的時間，可以被視為使用者交互發生時間的代理。

此介面還支援以下屬性：

PerformanceEventTiming.cancelable 只讀

返回與事件關聯的 cancelable 屬性。

PerformanceEventTiming.interactionId 只讀

返回唯一標識觸發關聯事件的使用者互動的 ID。

PerformanceEventTiming.processingStart 只讀

返回一個 DOMHighResTimeStamp，表示事件分派開始的時間。要測量使用者操作到事件處理程式開始執行之間的時間，請計算 processingStart - startTime。

PerformanceEventTiming.processingEnd 只讀

返回一個 DOMHighResTimeStamp，表示事件分派結束的時間。要測量事件處理程式執行所需的時間，請計算 processingEnd - processingStart。

PerformanceEventTiming.target 只讀

返回與事件關聯的最後一個目標，如果它未被移除。

例項方法

PerformanceEventTiming.toJSON()

返回 PerformanceEventTiming 物件的 JSON 表示形式。

示例

獲取事件計時資訊

要獲取事件計時資訊，請建立一個 PerformanceObserver 例項，然後呼叫其 observe() 方法，並將 "event" 或 "first-input" 作為 type 選項的值。您還需要將 buffered 設定為 true，以訪問使用者代理在構建文件時緩衝的事件。然後，PerformanceObserver 物件的回撥將以 PerformanceEventTiming 物件列表的形式被呼叫，您可以進行分析。

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 });

您還可以設定不同的 durationThreshold。預設值為 104ms，可能的最小持續時間閾值為 16ms。

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

規範

瀏覽器相容性

另見

• Intersection Observer API
• Page Visibility API