High Refresh Web
summary
Browsers invoke requestAnimationFrame on every display refresh, so high-refresh screens (120 Hz, 360 Hz) increase rAF ticks and can break animations that assume 60 Hz. The talk presents fixes: scale by delta/16ms, prefer CSS animations when duration is fixed, implement FPS capping to a divisor of the display rate or switch to elapsed-time–based animations, detect refresh rate by sampling rAF and use performance.now. A 3D web map engine example shows switching to time-based animation and rAF sampling stabilizes motion across 60/120/360 Hz displays.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 2:362GIS project overview
- 4:24Hertz vs refresh rate
- 8:18High refresh monitors
- 11:14High refresh in browsers
- 13:22requestAnimationFrame purpose
- 19:09Fixing frame rate issues
- 27:03FPS and frame pacing
- 31:46Detecting refresh rate
- 33:10Summary for devs
- 41:54Q&A
- 51:15Q&A
- 59:50Conclusion
related talks
22mPerformant web animations — Emily Hayman
33mSaving the Web 16 Milliseconds at a Time
30mLet the main thread breathe!
28m60 FPS or Bust: Bleeding Edge Web Animation
49mRendering without lumpy bits
32mDone in 0.0166666666 seconds
47mRendering Web Performance
44mFast but not Furious: Debugging User Interaction Performance Issues