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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.