← Lessons

quiz vs the machine

Platinum1750

Frontend

Reducing Main Thread Work

Free the single thread that runs your scripts, layout, and paint so the page can respond to users quickly.

5 min read · advanced · beat Platinum to climb

One thread does almost everything

In a browser, a single main thread parses and runs your JavaScript, computes styles, lays out the page, and paints. While it is busy with one job it cannot do another, so heavy work there makes the page feel frozen and ignores user input.

  • Script parsing, evaluation, and execution all occupy this thread.
  • Style calculation, layout, and paint also run there.
  • Any long block delays both rendering and interaction.

Where the time goes

Profiling usually reveals a few heavy categories worth attacking.

  • Script evaluation dominates when bundles are large.
  • Layout and style recalculation spike when code reads and writes the page in a churning loop.
  • Long tasks are single blocks that monopolize the thread.

Strategies to lighten it

  • Ship less JavaScript through splitting and removing unused code.
  • Move heavy computation into a worker off the main thread.
  • Batch reads and writes to avoid forced synchronous layout.
  • Defer non critical work until the page is idle.

Key idea

The main thread runs scripts, layout, and paint together, so cutting JavaScript and offloading heavy work keeps it free to respond to users.

Check yourself

Answer to earn rating on the learn ladder.

1. Why does heavy main thread work make a page feel frozen?

2. Which technique moves heavy computation off the main thread?

3. What causes forced synchronous layout?