All 10 Event Loop & Concurrency questions
More in Event Loop & Concurrency
Is JavaScript single-threaded, and what does that mean in practice? What is the call stack? What is the difference between the microtask queue and the macrotask (task) queue? How does the event loop decide what to run next? Why does Promise.resolve().then(cb) run before setTimeout(cb, 0), even with a 0ms delay? How would you break a large synchronous task into chunks to keep the UI responsive? What is 'starvation' of the macrotask queue, and how can recursive microtasks cause it? How does async/await map onto the microtask queue under the hood? What's the relationship between requestAnimationFrame and the event loop's rendering step?
Advertisement
Back to results for “Performance”
JavaScript › Event Loop & Concurrency

Why does a long synchronous function block UI updates and event handling?

Intermediate

Answer

Since JS runs on one thread shared with rendering and input handling, any synchronous code that takes a long time to finish prevents the browser from processing clicks, repainting the screen, or running queued callbacks until that function returns.
function blockFor(ms) {
  const end = Date.now() + ms;
  while (Date.now() < end) {} // busy-waits, freezing the page
}
blockFor(3000); // UI is frozen for 3 seconds
Real-world example Diagnosing a frozen 'Not Responding' UI caused by a synchronous JSON.parse() on a huge payload.

Common follow-ups: How would you break up a long synchronous task to avoid blocking the UI?

Performance Optimization: Debouncing Throttling & Memoization
All 10 Event Loop & Concurrency questions