The browser main thread is expensive: a practical guide to JavaScript and CSS animation cost
jh3yy · x · 2026-09-11
- A long-form article from kciter.so explains that jank (scroll stutter, delayed clicks) usually comes from a blocked main thread, not slow algorithms.
- The main thread handles both JS execution (events, callbacks, framework internals) and most of the render pipeline (rAF callbacks, style calc, layout, paint); only compositing runs on the compositor thread.
- At 60Hz each frame gets 16.6ms, with a real budget of 10ms after browser overhead; 120Hz devices halve that.
- Optimization splits into two camps: economizing the main thread (splitting, batching, prioritizing, deferring work) and avoiding it entirely (moving to compositor, offloading to Workers, eliminating the work).
- Essential reading for anyone building animated, interaction-heavy web interfaces.
More from coding & agent
- Two real 'company brains' opened up live: Gorgias' in-house Cortex vs Slite — femke_plantinga · 2026-09-11
- Claude Unlimited: open-source local proxy rotates accounts and API keys to keep Claude Code sessions alive — Similar_Injury_6739 · 2026-09-11
- Inspired by OpenAI's 10,000-agent run, dev open-sources a crowdsourced agent problem-solving platform — Benjaminsen · 2026-09-11
- Lucid: open-source Mac app keeps your laptop awake only while AI agents run — Pitiful_Hedgehog_600 · 2026-09-11
- banteg's snail project crowdsources AI agents to finish matching Snail Mail's 20 remaining functions — banteg · 2026-09-11
- Alex Townsend posts 200 open problems in numerical linear algebra for humans and AI agents — IgorCarron · 2026-09-11