The browser as a video rendering engine: Deep dive into time management
summary
Claims a deterministic time API with a single source of truth that derives all UI and side effects from two values (play-start timestamp and play offset), cutting inconsistent synced state and avoiding per-frame React rerenders by using useTimeSelector and useTimeEffect. Tests run faster than real time by mocking Date with MockDate and swapping requestAnimationFrame for setTimeout in Jest fake timers. Rendering shifts from real-time screen capture to frame-by-frame rendering in a headless browser, with video elements periodically reporting drift and plans to try the Web Timing API.
AI-written summary · about
chapters (4)
related talks
31mStreaming React for Faster UIs
25mBetting on the web: Ensuring fine-tuned performance for dynamic web apps
25mProgressive Rendering – how to make your app render sooner
01h 03mSpeed up your Web Application
46mA DIY guide to building your own Rendering Engine
13mCreating videos... with React!
18mThe need for speed - Single-page apps, Optimistic UIs, Reactivity
49mRendering without lumpy bits