CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
webKiT/SafaRi
Apple has also been doing interesting work in the WebKit nightlies. If you
grab one of the recent releases you’ll find that two new tools are exposed to
help improve rendering performance.
The first is that the Web Inspector recently introduced a layer details
sidebar for getting insights into WebKit’s compositing of elements. It high-
lights layer information for a selected DOM element (if it’s been promoted
to a layer) as well as layers for descendant elements.
When you select a layer in the sidebar, it displays a pop-over summa-
rizing the reasons the layer was created (promoted). Depending on the type
of page you’re working on, eliminating layers can be a good way to reduce
your page’s graphics performance overhead.
The quickest way to view layer information for a page is to inspect
the document body and review the child layers. You’re then able to narrow
down the list by inspecting descendants that are even deeper. Similar to
Chrome, you can also show compositing layer borders, done in the DOM
tree’s navigation bar, which overlays your page to provide a clearer visual-
ization of layers and the number of times they are being repainted.