3.2 Paint rectangles
DevTools paint rectangles rendering
3.2.1 Analyse paint
With "show paint rectangles" enabled you be able to see the regions where the browser has to perform paint. This can help you diagnose and avoid unnecessary paints on a page. You can also use this to study painting behaviors just by hovering over links and popups.
Lets use this feature to determine the paint behaviour on our example page.
- Open the example-site/index.html page in your browser
- Open up the browsers JS console alt + ctrl + j
- Open the drawer panel and go the Rendering tab.
- Check the "Show paint rectangles" & "Show composited layer borders" options
- Scroll around the page to see the painting behaviour.
See what happens when hovering over the cards on scroll.
As we have learnt so far, using a CSS transform hack we can force certain elements onto their own GPU composition layer. Placing something on its own layer can help prevent the element's parent or siblings from being reflowed when we are animating it.
transform: translatez(0); to certain elements and view the effect it has using
the "Show composited layer borders" option in conjunction with the "FPS meter".
Use this functionality with care, it may have detrimental effects on your performance.