Don't block the event loop!JavaScript Async for Effortless UX

on YouTube ↗27m

" summary

Explains why UI freezes come from run to completion, call stack and the event loop and shows concrete tools and tradeoffs rather than vague UX tips. demonstrates a 3s frame stall versus 16ms 60fps budget and explains microtask vs task ordering with Promise and setTimeout. uses Web Workers and chunked generators to move CPU work off main thread and to slice work into tasks. Profiles show big drops in interaction wait time and remaining DOM updates as the limiting factor.

AI-written summary · about

" chapters (14)

1. 0:00Async JavaScript and UX
2. 1:22UX problems in web apps
3. 3:10Run-to-completion model
4. 6:54Call stack and event loop
5. 8:24Event loop and async programming
6. 12:30UI blocks from async APIs
7. 15:02Blocking UI demo setup
8. 17:55Web Workers for blocking tasks
9. 19:45Web Workers demo
10. 21:14Chunking heavy tasks
11. 22:45Task chunking demo
12. 23:32Optimizing DOM updates
13. 24:38Optimized demo and profiling
14. 25:01Solutions and best practices

" related talks

• 44mLeveraging the Event Loop for Blazing-Fast Apps!Michael Di Prisco · JavaScript fwdays’23
• 35mIn the loopJake Archibald · JSConf.Asia 2018
• 19mLet the Main Thread Breathe!Majid Haijan · React Summit 2020
• 25mDemystifying Web Workers and Service WorkersNolan Lawson · CascadiaFest 2016
• 42mLet the Main Thread Breathe!Majid Hajian · HalfStack Online 2020
• 23mMultithreading in JavascriptDani Coll · CityJS Athens 2025
• 20mOn ResponsivenBen Galbraith, Dion Almaer · Velocity 2009
• 27mWhat the heck is the event loop anyway?Philip Roberts · JSConf EU 2014