Let the Main Thread Breathe!
summary
Global web apps hit a 16.6ms frame budget for 60fps and cheaper phones (Nokia 2 vs iPhone) make main-thread blocking visible, so this talk shows concrete off-main-thread fixes: Comlink + Web Workers to move heavy Redux reducers or a blocking sort off the UI thread (demo: UI freezes with sync sort, responsive after worker), AssemblyScript → WebAssembly for in-browser MP4 camera encoding, and CSS Paint / Houdini worklets used to build a smooth barcode generator.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 0:26Why main thread matters
- 5:20Main thread overload
- 9:20Web workers basics
- 12:35Web workers with Comlink
- 14:25Offloading Redux to workers
- 16:35Reliability over speed
- 19:06Demo blocked UI
- 19:48Demo unblocked UI
- 20:08WebAssembly intro
- 21:14AssemblyScript benefits
- 23:03Using WebAssembly
- 24:51WebAssembly reliability
- 25:53Worklets explained
- 27:18CSS Paint API demo
- 29:04Barcode generator demo
- 29:27Summary and tools
related talks
19mLet the Main Thread Breathe!
30mLet the main thread breathe!
53mLet the main thread breathe!
31mLet the Main Thread Breathe!
47mAdventures in Rendering Off the Main Thread
28mKeep the Main Thread Free With Web Workers
15mWeb Workers — Add Productivity to Your Web Applications
27mDon't block the event loop!JavaScript Async for Effortless UX