PerformanceEventTiming

在此页

特性
方法
范例
规范
浏览器兼容性
相关话题

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

特性

PerformanceEventTiming.processingStart
PerformanceEventTiming.processingEnd
PerformanceEventTiming.cancelable
PerformanceEventTiming.target

方法

PerformanceEventTiming.toJSON()

范例

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.
}

规范

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

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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

图例

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

元数据

最后修改： May 15, 2020