No More Jank: Escaping the Matrix of Frame Drops
summary
Explains concrete fixes: move JSON parsing out of build to an isolate using use compute to offload parsing, debounce rapid inputs and cancel stale requests, cache and resize images before rasterizing, and prefer decorated boxes over ClipRRect to cut CPU. Demonstrates DevTools workflows—Timeline, GPU profiler, repaint rainbow, widget rebuild stats—and measures against the 16.7 ms frame budget (or 8.3 ms@120Hz). Shows a HUD overlay from GitHub and warm‑ups shaders/animations; result is noticeably smoother scrolling and far fewer frame drops.
AI-written summary · about
chapters (14)
- 0:00Matrix of frame drops
- 3:16Rendering pipeline
- 12:53Framekeeper and villains
- 16:46Diagnosing jank with Flutter tools
- 21:19CPU smith and architect
- 23:07Heavy computations and API parsing
- 24:14Layout phase jank
- 25:15UI effects and GPU strain
- 29:09Rasterization and caching
- 33:44Async operations with debouncers
- 38:21Pre-compiling animations
- 40:27Performance analysis with tools
- 41:51Jank-free development laws
- 42:34Smoothness frame by frame
related talks
44mNo More Jank: How to Keep Your Flutter App Smooth and Snappy
28mOptimizing and Profiling UI Performance
49mRendering without lumpy bits
30mFast but not furious: debugging user interaction performance issues
31mJank Busters - Chrome Rendering Performance
59mRendering Performance
21mWanna get rid of UI Jank?
33mSaving the Web 16 Milliseconds at a Time