The main thread is the browser's primary execution thread. It handles JavaScript, DOM updates, style calculations, layout, and painting. When blocked, the page becomes unresponsive.
Main thread responsibilities
- Parsing HTML and CSS
- Executing JavaScript
- Handling user input events
- Calculating styles and layout
- Painting pixels to screen
- Garbage collection
Main thread blocking
Long tasks (>50ms) on the main thread can cause:
- Delayed response to clicks/taps
- Janky scrolling
- Poor INP scores
- Visual stuttering
Keeping the main thread free
Break up long tasks
// Instead of one long task
function processAll(items) {
items.forEach(process);
}
// Break into chunks
function processChunked(items) {
requestIdleCallback(() => {
// Process a chunk
});
}
Use Web Workers
Move heavy computation off the main thread:
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
Measuring main thread work
- Lighthouse "Minimize main thread work"
- Chrome DevTools Performance panel
- Total Blocking Time (TBT)
Related Terms
Interaction to Next Paint (INP)
A Core Web Vital that assesses page responsiveness by measuring the latency of all user interactions throughout the page lifecycle.
JavaScript Execution Time
The time the browser spends parsing, compiling, and executing JavaScript code, which can block the main thread and delay interactivity.
Render Blocking
Resources that prevent the browser from rendering page content until they are fully downloaded and processed.
Total Blocking Time (TBT)
A lab metric that measures the total amount of time the main thread was blocked long enough to prevent input responsiveness.