← Lessons

quiz vs the machine

Platinum1800

Frontend

The Long Task Breakup

Split work that blocks the main thread into smaller chunks that yield, keeping the page responsive throughout.

5 min read · advanced · beat Platinum to climb

What makes a task long

A long task is any chunk of work that occupies the main thread for more than fifty milliseconds without giving the browser a chance to do anything else. During a long task the page cannot respond to clicks or paint updates, so it feels stuck. Breaking these tasks up restores responsiveness.

  • The browser cannot handle input while a task runs.
  • Tasks over the threshold are flagged as long.
  • Many small tasks feel far smoother than one big one.

How yielding helps

Yielding means pausing your work to let the browser handle pending input and rendering, then resuming. Inserting yield points turns one blocking task into several short ones with gaps between them.

  • Chunk the work into batches that each finish quickly.
  • Yield between chunks so the browser can respond.
  • Prioritize by handling pending input before continuing.

Practical patterns

  • Process large lists in small batches rather than all at once.
  • Use a scheduler that yields and resumes after urgent work.
  • Defer truly non urgent work to idle time.

Key idea

A long task freezes the page, so split heavy work into small chunks that yield to the browser, letting input and rendering happen between them.

Check yourself

Answer to earn rating on the learn ladder.

1. What defines a long task?

2. What does yielding accomplish?

3. How should you process a very large list to stay responsive?