PerformanceEventTiming

PerformanceEventTiming interface of the Event Timing API provides timing information for the event types listed below.

特性

PerformanceEventTiming.processingStart
Returns the time at which event dispatch started.
PerformanceEventTiming.processingEnd
Returns the time at which the event dispatch ended.
PerformanceEventTiming.cancelable
Returns the associated event's cancelable attribute.
PerformanceEventTiming.target
Returns the associated event's last target, if it is not removed.

方法

PerformanceEventTiming.toJSON()
Converts the PerformanceEventTiming object to JSON.

范例

The following example shows how to use the API for all events:

const observer = new PerformanceObserver(function(list) {
    const perfEntries = list.getEntries().forEach(entry => {
        // Full duration
        const inputDuration = entry.duration;
        // Input delay (before processing event)
        const inputDelay = entry.processingStart - entry.startTime;
        // Synchronous event processing time (between start and end dispatch).
        const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
    });
});
// Register observer for event.
observer.observe({entryTypes: ["event"]});
					

We can also directly query the first input delay .

// Keep track of whether (and when) the page was first hidden, see:
// https://github.com/w3c/page-visibility/issues/29
// NOTE: ideally this check would be performed in the document <head>
// to avoid cases where the visibility state changes before this code runs.
let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
document.addEventListener('visibilitychange', (event) => {
  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
}, {once: true});
// Sends the passed data to an analytics endpoint. This code
// uses `/analytics`; you can replace it with your own URL.
function sendToAnalytics(data) {
  const body = JSON.stringify(data);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
// Use a try/catch instead of feature detecting `first-input`
// support, since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  function onFirstInputEntry(entry) {
    // Only report FID if the page wasn't hidden prior to
    // the entry being dispatched. This typically happens when a
    // page is loaded in a background tab.
    if (entry.startTime < firstHiddenTime) {
      const fid = entry.processingStart - entry.startTime;
      // Report the FID value to an analytics endpoint.
      sendToAnalytics({fid});
    }
  }
  // Create a PerformanceObserver that calls `onFirstInputEntry` for each entry.
  const po = new PerformanceObserver((entryList) => {
    entryList.getEntries().forEach(onFirstInputEntry);
  });
  // Observe entries of type `first-input`, including buffered entries,
  // i.e. entries that occurred before calling `observe()` below.
  po.observe({
    type: 'first-input',
    buffered: true,
  });
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}
					

规范

规范 状态 Comment
未知
The definition of '[[Member]]' in that specification.
未知 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
PerformanceEventTiming
Chrome 77 Edge 80 Firefox No IE No Opera Yes Safari No WebView Android 77 Chrome Android 77 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 12.0
cancelable
Chrome 77 Edge 80 Firefox No IE No Opera Yes Safari No WebView Android 77 Chrome Android 77 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 12.0
processingEnd
Chrome 77 Edge 80 Firefox No IE No Opera Yes Safari No WebView Android 77 Chrome Android 77 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 12.0
processingStart
Chrome 77 Edge 80 Firefox No IE No Opera Yes Safari No WebView Android 77 Chrome Android 77 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 12.0
toJSON
Chrome 77 Edge 80 Firefox No IE No Opera Yes Safari No WebView Android 77 Chrome Android 77 Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android 12.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。