Webkit blog post • Machine translation + proofreading
The recently released Safari Technology Preview adds a new experimental feature to the Web inspector: the Layers TAB. Building on the existing Layers sidebar, this TAB introduces a three-dimensional display of the Layers of the page being examined, making it more practical (and fun!) for developers. To understand the layer generation and rendering order.
In this article, we’ll look at how to use the Layers TAB to find unexpected memory consumption or excessive redrawing on a web page.
A quick introduction to Layers
Before introducing any debugging tools, let’s look at what we’re going to be debugging. At first glance, layer visualization may look very similar to DOM visualization (such as Tilt for Firefox), but composite layers and DOM elements are conceptually different entities. Although Web developers are familiar with the structure of DOM trees as elements on a page, the way these elements are rendered on the screen is often learned only when needed.
Instead of drawing DOM elements one by one on the screen, after calculating the position and size of each element, they are drawn onto a series of surfaces called layers, which are composed in a specific order to produce the final look of the web page. While pages have a root layer that corresponds to the document itself, any DOM element also creates a new layer. Such as special elements (such as
Layers have a significant impact on rendering performance. If no layer exists, you have to redraw the entire page while the element is animated (for example, sliding the title). However, if the element has its own layers, it is possible to skip the entire redraw and only animate the layers that are needed. Of course, the price of computing savings is high memory costs, so creating too many layers can have disastrous results on memory-constrained devices. As with any performance problem, finding the right balance is fine, but this has been done empirically in the past, so having the right debugging tools is crucial!
Use the Layers Tab to locate the problem
The Layers TAB contains 3D visualizations of layers and real-time displays of spreadsheets. We can use them in combination to discover potential performance problems.
Explore the visual interface to understand the location, size, and rendering order of each layer. To navigate, left-click drag to rotate, right-click drag to pan, and then scroll to zoom. Clicking on a layer in the diagram highlights the corresponding row in the layer sheet.
(Here is a file that looks like a GIF but is actually.mp4 that can’t be transferred)
We can then use the table to identify the most expensive layers, sort memory consumption by memory (the default), or count the number of times they have been redrawn. Select any row in the table to display information about the layer’s reason for existence and its composable and visible dimensions (visualized as outline and plane, respectively). This also recalibrates the visualization of the selection, illustrating how the layer fits into the larger image.
So we might detect an oddly placed layer nearby and find it quickly, or we might check each of the most resource-consuming layers in turn. If a layer looks suspicious, we can click the arrow icon in its table row to switch to the elements TAB and examine the DOM element that generated it. If this is not enough to explain the very high number of redraws, we can turn to the timeline TAB to determine which drawing events are triggered.
Once we’ve identified our problem, we can modify the HTML/CSS appropriately!
feedback
The Layers TAB is available in the latest Safari Technology Preview. To Enable it, go to the ‘Experimental’ panel on the ‘Settings’ Tab of the Web Inspector and select the’ Enable Layers Tab ‘Settings. Give it a try and let us know what you think! On Freenode IRC’s # webkit-Inspector, or on Twitter dedicated to @webKit, or by submitting error messages.
Luo Xiaohei writes
If you like the article please leave a like ~ if you like the article to share to more people ~
Follow me in nuggets follow me in Jane’s book
Free reprint – Non-commercial – Non-derivative – Keep attribution (Creative Commons 3.0 License) Please keep the link to the original article when reprint to ensure timely access to corrections and amendments to the article