W3cubDocs

/Web APIs

PerformanceLongTaskTiming

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The PerformanceLongTaskTiming interface provides information about tasks that occupy the UI thread for 50 milliseconds or more.

Description

Long tasks that block the main thread for 50ms or more cause, among other issues:

  • Delayed Time to interactive (TTI).
  • High/variable input latency.
  • High/variable event handling latency.
  • Janky animations and scrolling.

A long task is any uninterrupted period where the main UI thread is busy for 50ms or longer. Common examples include:

  • Long-running event handlers.
  • Expensive reflows and other re-renders.
  • Work the browser does between different turns of the event loop that exceeds 50 ms.

Long tasks refer to "culprit browsing context container", or "the container" for short, which is the top-level page, <iframe>, <embed> or <object> that the task occurred within.

For tasks that don't occur within the top-level page and for figuring out which container is responsible for the long task, the TaskAttributionTiming interface provides the containerId, containerName and containerSrc properties, which may provide more information about the source of the task.

Inheritance

PerformanceLongTaskTiming inherits from PerformanceEntry.

PerformanceEntry PerformanceLongTaskTiming

Instance properties

This interface extends the following PerformanceEntry properties for long task timing performance entry types by qualifying them as follows:

PerformanceEntry.duration Read only Experimental

Returns a DOMHighResTimeStamp representing the elapsed time between the start and end of the task, with a 1ms granularity.

PerformanceEntry.entryType Read only Experimental

Always returns "longtask"

PerformanceEntry.name Read only Experimental

Returns one of the following strings referring to the browsing context or frame that can be attributed to the long task:

  • "cross-origin-ancestor"
  • "cross-origin-descendant"
  • "cross-origin-unreachable"
  • "multiple-contexts"
  • "same-origin-ancestor"
  • "same-origin-descendant"
  • "same-origin"
  • "self"
  • "unknown"
PerformanceEntry.startTime Read only Experimental

Returns a DOMHighResTimeStamp representing the time when the task started.

This interface also supports the following properties:

PerformanceLongTaskTiming.attribution Read only Experimental

Returns a sequence of TaskAttributionTiming instances.

Instance methods

PerformanceLongTaskTiming.toJSON() Experimental

Returns a JSON representation of the PerformanceLongTaskTiming object.

Examples

Getting long tasks

To get long task timing information, create a PerformanceObserver instance and then call its observe() method, passing in "longtask" as the value of the type option. You also need to set buffered to true to get access to long tasks the user agent buffered while constructing the document. The PerformanceObserver object's callback will then be called with a list of PerformanceLongTaskTiming objects which you can analyze.

js

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "longtask", buffered: true });

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
PerformanceLongTaskTiming 58 79 No No 45 No 58 58 No 43 No 7.0
attribution 58 79 No No 45 No 58 58 No 43 No 7.0
toJSON 58 79 No No 45 No 58 58 No 43 No 7.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming