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
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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 |
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 | |
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 | |
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 | |
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.
PerformanceEventTiming by Mozilla Contributors is licensed under CC-BY-SA 2.5.