Main Thread (Browser)

The main thread is the thread in each browser tab that executes JavaScript, processes user events, parses HTML and CSS, computes styles and layout, and issues paint instructions. Because it does all these jobs in one queue, only one thing happens at a time.

Why it matters

If a script monopolizes the main thread, nothing else can run: clicks wait, animations stutter and rendering stalls. That is why responsiveness metrics such as INP and TBT are really measures of main-thread congestion. Fast networks do not help when the CPU, particularly on a low-end phone, is the bottleneck.

Work that can leave the main thread should: Web Workers run JavaScript in parallel without DOM access, CSS animations of transform and opacity can run on the compositor, and network fetches are handled off-thread by the browser.

Example

// worker.js receives data, does heavy work, returns the result
const worker = new Worker('worker.js');
worker.postMessage(bigArray);
worker.onmessage = e => render(e.data);

Common mistakes

• Testing performance only on a fast developer laptop.
• Running big JSON parsing, sorting or image processing directly in click handlers.
• Assuming async functions run in parallel. They still run on the same thread unless offloaded.
• Importing large libraries needed only occasionally.

Related

• Long task
• INP
• Thread
• JavaScript

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.