Panel 3: Performance
summary
Goal is 60 frames per second but steady 30 frames per second often beats intermittent 60; Facebook tests show slowing frame rate cuts engagement and actions. Large DOMs force view recycling and pooling, server-side premeasurement, or measuring during idle frames. Images dominate costs: WebP decodes slower than JPEG, decoding in workers helps for large images, and resizing/clipping has big paint cost. Tools cited: Chrome timeline, heap snapshots, telemetry, Skia debugger and a continuous repaint mode to bisect heavy paints. Garbage collection and GPU texture memory from translateZ(0) remain recurring, platform-dependent bottlenecks.
AI-written summary · about
chapters (24)
- 0:00Introduction and panel
- 1:35Scrolling and frame goals
- 3:24DOM size and complexity
- 4:24DOM manipulation challenges
- 6:37Measuring without freezing
- 8:02Image handling and decoding
- 10:54Garbage collection issues
- 13:02Memory management on mobile
- 14:47Controlling garbage collection
- 17:21GC observability and heuristics
- 20:46Memory-efficient coding
- 22:38Hardware acceleration impact
- 25:56GPU profiling and tooling
- 29:36Advanced profiling with Skia
- 32:31Key performance metrics
- 35:03Performance and engagement
- 37:17CSS optimization tips
- 39:28SVGs vs image formats
- 42:26Tracing expensive CSS
- 45:04Asynchronous compositing
- 47:05Low-level API control
- 48:21Understanding reflows
- 50:55Coalescing layout operations
- 53:40Final thoughts and closing
related talks
59mRendering Performance
39mPerformance Beyond Page Load
58mRendering performance from the ground up
32mParallax Performance
44mFast but not Furious: Debugging User Interaction Performance Issues
30mFast but not furious: debugging user interaction performance issues
30mFast but not furious: debugging user interaction performance issues
49mRendering without lumpy bits