This API enables visibility into slow events by providing event timestamps and duration for certain event types (see below). For example, you can monitor the time between a user action and the start of its event handler, or the time an event handler takes to run.

This API is particularly useful for measuring theInteraction to Next Paint (INP): the longest time (minus some outliers) from the point when a user interacts with your app to the point until the browser was actually able to respond to that interaction.

You typically work withPerformanceEventTiming objects by creating aPerformanceObserver instance and then calling itsobserve() method, passing in"event" or"first-input" as the value of thetype option. ThePerformanceObserver object's callback will then be called with a list ofPerformanceEventTiming objects which you can analyze. See theexample below for more.

By default,PerformanceEventTiming entries are exposed when theirduration is 104ms or greater. Research suggests that user input that is not handled within 100ms is considered slow and 104ms is the first multiple of 8 greater than 100ms (for security reasons, this API is rounded to the nearest multiple of 8ms).However, you can set thePerformanceObserver to a different threshold using thedurationThreshold option in theobserve() method.

This interface inherits methods and properties from its parent,PerformanceEntry:

The following event types are exposed by the Event Timing API:

Note that the following events are not included in the list because they are continuous events and no meaningful event counts or performance metrics can be obtained at this point:mousemove,pointermove,pointerrawupdate,touchmove,wheel,drag.

To get a list of all exposed events, you can also look up keys in theperformance.eventCounts map:

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

This interface has no constructor on its own. See theexample below for how to typically get the information thePerformanceEventTiming interface holds.

This interface extends the followingPerformanceEntry properties for event timing performance entry types by qualifying them as follows:

PerformanceEntry.durationRead only

Returns aDOMHighResTimeStamp representing the time fromstartTime to the next rendering paint (rounded to the nearest 8ms).

PerformanceEntry.entryTypeRead only

Returns"event" (for long events) or"first-input" (for the first user interaction).

PerformanceEntry.nameRead only

Returns the associated event's type.

PerformanceEntry.startTimeRead only

Returns aDOMHighResTimeStamp representing the associated event'stimestamp property. This is the time the event was created and can be considered as a proxy for the time the user interaction occurred.

This interface also supports the following properties:

PerformanceEventTiming.cancelableRead only

Returns the associated event'scancelable property.

PerformanceEventTiming.interactionIdRead onlyExperimental

Returns the ID that uniquely identifies the user interaction which triggered the associated event.

PerformanceEventTiming.processingStartRead only

Returns aDOMHighResTimeStamp representing the time at which event dispatch started. To measure the time between a user action and the time the event handler starts to run, calculateprocessingStart-startTime.

PerformanceEventTiming.processingEndRead only

Returns aDOMHighResTimeStamp representing the time at which the event dispatch ended. To measure the time the event handler took to run, calculateprocessingEnd-processingStart.

PerformanceEventTiming.targetRead only

Returns the associated event's last target, if it is not removed.

PerformanceEventTiming.toJSON()

Returns a JSON representation of thePerformanceEventTiming object.

To get event timing information, create aPerformanceObserver instance and then call itsobserve() method, passing in"event" or"first-input" as the value of thetype option. You also need to setbuffered totrue to get access to events the user agent buffered while constructing the document. ThePerformanceObserver object's callback will then be called with a list ofPerformanceEventTiming objects which you can analyze.

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 eventsobserver.observe({ type: "event", buffered: true });

You can also set a differentdurationThreshold. The default is 104ms and the minimum possible duration threshold is 16ms.

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

• Intersection Observer API
• Page Visibility API