Web development and performance
What is Main thread?
The main thread is where a browser runs JavaScript, calculates layout and paints. It does one thing at a time, so any long task blocks everything else — including responding to a tap. It is the reason heavy pages feel unresponsive rather than merely slow.
Also called: JavaScript main thread · blocking the main thread
What occupies it
- Parsing and executing JavaScript, which is the largest cost on most sites
- Framework hydration attaching handlers across the DOM
- Layout recalculation triggered by reading geometry after writing styles
- Third-party tags doing work you did not commission
The interaction cost
When a user taps, the browser must finish the current task before it can respond. A 300ms task in progress means at least 300ms before anything visibly happens, which is measured directly as Interaction to Next Paint.
Reducing it
- Ship less JavaScript — architectural, and by far the largest lever
- Break long tasks so the browser can respond between them
- Move heavy computation to a web worker where it genuinely belongs
- Avoid reading layout properties inside scroll and mousemove handlers
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.