By Addy Osmani CHAPTER 6ly repainting, providing a counter that shows just how much paint work is
being done. You can use the H shortcut mentioned above to toggle different
styles (keep an eye on the counter!) to diagnose what is causing the slow-
down.
Show CoMPoSiTeD laYeR boRDeRS
Another great setting in Developer Tools that can help here is “Show com-
posited layer borders.” This feature will give you insight into those DOM
elements that are being manipulated at the GPU level.
If an element takes advantage of the GPU acceleration, you’ll see an
orange border around it with this on. Now as we scroll through, we don’t
really see any use of composited layers on this page — not when we click
“Scroll to top” or otherwise. Chrome is getting better at automatically han-
dling layer promotion in the background, but, as mentioned, developers
sometimes use the translateZ hack to create a composited layer. Below is
one site’s home page with translateZ(0) applied to all pins. It’s not hitting
With “Show composited layer borders” on, elements promoted to a new layer
are highlighted with a colored border.