A 16.67 Millisecond Frame
2 days ago
- #javascript-animation
- #performance-optimization
- #browser-rendering
- The browser rendering process includes scripting, style calculation, reflow (layout), repaint, and composite steps within a 16.67ms frame budget to avoid jank.
- Changing properties like `top`, `left`, `width`, `height`, or `margin` triggers reflow, while `background-color`, `box-shadow`, and `border-radius` trigger repaint.
- Optimized animations use GPU-accelerated properties like `transform` and `opacity` to skip reflow and repaint, ensuring smoother performance.
- A demo compares unoptimized (using `top` and `left`) and optimized (using `transform` and `opacity`) versions, showing significant FPS differences.
- Browser engines (e.g., Chrome vs. Firefox) handle unoptimized code differently, so cross-browser performance testing is essential.
- DevTools' FPS meter reveals the unoptimized version struggles at 21 FPS, while the optimized version maintains 60 FPS.
- Smooth animations require leveraging browser rendering rules, favoring GPU-accelerated properties over layout/paint-triggering ones.