Understanding and Using the Long Task API for Frontend Performance Optimization

The article, originally published in the Qiyu Weekly by former 360 Qiwuchuan front‑end engineer Liu Yuchen (also a W3C Performance Working Group member), introduces the Long Task API as a tool for pinpointing performance problems in web pages.

A "long task" is any task that blocks the main thread for more than 50 ms, causing input lag, dropped frames, or animation stutter. Common sources include continuous DOM size/position calculations with relayout, generating massive DOM trees, and heavy JavaScript execution.

The Long Tasks API defines the PerformanceLongTaskTiming interface, which includes key fields such as name (type of task), entryType (always "longtask"), start , end , and an attribution array that provides detailed provenance information.

Each entry in attribution is a TaskAttributionTiming object, extending PerformanceEntry . It contains name (e.g., "script"), entryType ("taskattribution"), start , end , and four container‑specific properties: containerType , containerName , containerId , and containerSrc . These describe whether the task originates from the page itself, a same‑origin iframe, a cross‑origin iframe, or other embed contexts. Privacy and same‑origin policies may mask container details for cross‑origin tasks.

To observe long tasks, developers can create a PerformanceObserver that listens for entries of type "longtask". Example code: const observer = new PerformanceObserver(list => { list.getEntries().forEach(item => { // longtask type console.log(`long task name is: ${item.name}`); console.log('long task attribution is:'); console.log(JSON.stringify(item.attribution, null, 2)); }); }); observer.observe({ entryTypes: ['longtask'] });

Compatibility as of October 2018: Chrome 58+ implements PerformanceLongTaskTiming and TaskAttributionTiming ; Edge does not support PerformanceObserver for long tasks, and other browsers have varying levels of support.

Advantages of the Long Task API include the ability to distinguish whether performance bottlenecks stem from the main project code or third‑party resources. Limitations are its difficulty in pinpointing the exact iframe when multiple third‑party frames are present, lack of direct code location information, and limited browser support. For comprehensive diagnosis, developers should combine the Long Task API with other performance tools such as the Performance Timeline.

References: https://html.spec.whatwg.org/multipage/webappapis.html#concept-task https://w3c.github.io/longtasks/#sec-processing-model