Paint Flashing and the Timeline
Spotting Jank and Bottlenecks with Dev Tools
- Open dev tools
- esc for console
- rendering tab
- enable Enable Paint Flashing
For example, on her own site, when she toggles the sidebar, it's only painted (green) at the beginning and at the end of the animation.
Tip: use the dev tools to slow down the animations to better see the repaint rectangles.
The Timeline tool
timeline tab > record (note: as of December 2016 it's been renamed performance)
Demoes the recording on the Alice on Wonderland site.
She asked for the inclusion of the screenshots strip to be included in the timeline at the chrome dev summit!
In her demo, Chrome did not record the entire animation...
She zooms on a small area of the timeline, and can actually see the events firing (jQuery.waypoints.min:8). In the Main thread part of the window. And also see on the FPS graph the dip it caused.
Best performance tip ever: don't animate it if it isn't visible.
With scrolling: use waypoints js to keep track of what's in view and what does not need to be animated.
Or use states!