Main Thread
The main thread is the browser thread responsible for much of the work required to process and display a web page.
JavaScript execution, style calculations, layout, and parts of rendering compete for time on this thread.
What It Means in Practice
The browser has many different jobs to perform.
When the main thread is busy with a long task, it may not be available to respond immediately to user input.
A button can therefore appear ready while a click or tap feels delayed because the browser is still processing other work.
What Uses Main-Thread Time
Common contributors include:
- JavaScript execution
- Parsing and compiling JavaScript
- Style calculation
- Layout
- Rendering work
- Large DOM updates
- Third-party scripts
- Complex interactions
JavaScript bundles can create significant main-thread work even after the network request finishes.
Why It Matters
Responsiveness depends on the browser having time available to react to people.
Heavy main-thread work can increase Interaction to Next Paint and make an interface feel sluggish or temporarily frozen.
Common Problems
Common causes include:
- Large JavaScript bundles
- Long-running JavaScript tasks
- Heavy third-party scripts
- Frequent layout recalculation
- Large synchronous DOM updates
- Complex client-side rendering
- Doing work immediately that could happen later
How to Improve
Reduce unnecessary JavaScript and split large tasks into smaller pieces where possible.
Delay non-critical work, simplify expensive interactions, and identify scripts consuming disproportionate execution time.
For computationally expensive work that does not require direct access to the page interface, web workers may allow certain tasks to run away from the main thread.