Web/API/PerformanceEventTiming

From Get docs

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

  • auxclick
  • beforeinput
  • click
  • compositionend
  • compositionstart
  • compositionupdate
  • contextmenu
  • dblclick
  • dragend
  • dragenter
  • dragleave
  • dragover
  • dragstart
  • drop
  • input
  • keydown
  • keypress
  • keyup
  • mousedown
  • mouseenter
  • mouseleave
  • mouseout
  • mouseover
  • mouseup
  • pointerover
  • pointerenter
  • pointerdown
  • pointerup
  • pointercancel
  • pointerout
  • pointerleave
  • gotpointercapture
  • lostpointercapture
  • touchstart
  • touchend
  • touchcancel


Properties

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.

Methods

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

Examples

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. The first input delay or FID, measures the time from when a user first interacts with a page (i.e. when they click a link or tap on a button) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

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

Specifications

Specification Status Comment
Event Timing APIThe definition of 'PerformanceEventTiming' in that specification. Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on 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

Experimental'

Chrome

Full support 77

Edge

Full support 80

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 77

Chrome Android

Full support 77

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 12.0

cancelable

Experimental'

Chrome

Full support 77

Edge

Full support 80

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 77

Chrome Android

Full support 77

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 12.0

processingEnd

Experimental'

Chrome

Full support 77

Edge

Full support 80

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 77

Chrome Android

Full support 77

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 12.0

processingStart

Experimental'

Chrome

Full support 77

Edge

Full support 80

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 77

Chrome Android

Full support 77

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 12.0

toJSON

Experimental'

Chrome

Full support 77

Edge

Full support 80

Firefox

No support No

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 77

Chrome Android

Full support 77

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 12.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.