The experimental Long Tasks API gives us visibility into tasks that take 50 milliseconds or more. The 50 ms threshold comes from the RAIL Model, in particular the "Response: process events in under 50 ms" section.
Tasks that block the main thread for 50 ms or more cause, among other issues:
- Delayed "Time to interactive".
- High/variable input latency.
- High/variable event handling latency.
- Janky animations and scrolling.
Some key terms or ideas that are utilized by the Long Tasks API.
Any uninterrupted period where the main UI thread is busy for 50 ms 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.
The "culprit browsing context container", or "the container" for short, is the top level page, iframe, embed or object that the task occurred within.
A list of containers that the task occurred within. For tasks that don't occur within the top level page, the containerId
, containerName
and containerSrc
fields may provide information as to the source of the task.
var observer = new PerformanceObserver(function(list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
}
});
observer.observe({entryTypes: ["longtask"]});