We describe the page in HTML, CSS, the browser parses it and renders it frame by frame, and after changing the DOM with JS, the browser recalculates the layout information and renders it.
Dom changes can be divided into high frequency and low frequency. For example, animation needs to change style at high frequency, and modern browsers all support GPU computing to accelerate rendering (hardware acceleration). How to integrate high frequency computing and low frequency computing, CPU rendering and GPU rendering?
The answer is Layer, the browser will render through different layers, and finally combine the layers into one frame.
What style will create a new layer?
You’ve probably heard that 3D Transform creates a new layer, will-change creates a new layer, etc., but you don’t know if you’re actually creating a new layer.
Instead of remembering what styles create Layers, I’m going to give you a layer analysis tool: The Layers tool in Safari Devtools.
It’s safari, not Chrome DevTools. Chrome DevTools is not very good at layer analysis.
Safari Devtools layer Analysis tool
First, Devtools in Safari should be enabled manually:
Open Devtools, this layer is the hero of the day:
Take the nuggets:
The middle area shows the layers on the page.
The three buttons on the right are to display the border, display the red background when drawing, and display all the layers in the page, all checked.
Showing borders means that each layer has a green border so that you can visually see which areas are rendered on a separate layer.
Displaying all the layers on the page lists the root elements of all the layers on the page on the right. You can see that there are 7 layers on the page, and these layers take up 47 MB of memory.
Showing a red background when drawing is a flash in each render frame to make it look like a new frame has been rendered. Like this GIF:
And then, the point is, why are all these layers created? What style causes it?
Click on each layer to see what caused the layer to be created!
Like HTML, because the layer is created by the root element, there’s nothing to say about that.
The sidebar layer is created because it has child elements with z-index negative.
The navigation bar was created for three reasons: the element has a 3D transformation, the position: Fixed style, and the element may have other elements overlapping.
The 3D conversion creates layers because it uses the GPU for calculation and rendering; Position: Fixed will create a layer because it is out of the document stream. Overlay with other elements will create a layer, so render on a separate layer.
Does will-change create a new layer?
So let’s try it. Let’s find an element with will-change:
Look, it’s green, that means it’s a new layer, so let’s go to Layers and see why.
The number of layers has gone from 7 to 8. The reason is will-change:
Will-change will only create a new layer if any of the six properties: opacity, transform, transform-style, perspective, filter, and backdrop filter are displayed. You may not know this, but the Layers tool suggests it directly.
Let’s comb through the causes of layer creation:
- The root element
- There are children whose z-index is negative
- There are 3 d conversion
- Position: fixed
- May overlap with other elements
- The value of will-change style is one of the six: opacity, transform, transform-style, perspective, filter, and backdrop filter
Of course, you don’t have to remember this at all, and Safari Devtools can directly analyze the layers and explain why.
And the relationship between layers can be seen intuitively:
Isn’t it super convenient?
Back to Chrome Devtools, why not use it?
Because it doesn’t work very well.
Chrome Devtools layer Analysis tool
I’m not intentionally blackening the Layers tool in Chrome Devtools. It’s just not great:
First, the interface is ugly, especially when displaying all layers. It doesn’t show the total number of layers, the amount of memory occupied, or the ability to jump directly to elements, which is not as good as Safari Devtools:
Compare safari’s:
Most importantly, the reason the layer was created doesn’t work:
The message displayed is not friendly enough:
Some don’t even show why:
Overall, Safari Devtools wins when it comes to layer debugging tools.
Of course, Chrome Devtools is great for other debugging tools.
Safari Devtoos does have a great layer debugger, which is like our ability development. You don’t have to be strong in every area, but you have to be strong in one area to be competitive.
We’re not going anywhere. Close.
conclusion
Browsers use layers to organize the rendering of different elements.
3D conversion causes layer creation, element overlap causes layer creation, will-change causes layer creation for certain values, and so on.
What layers a page has and what causes them to be created can be easily analyzed using Safari Devtoos.
Chrome Devtools also has the Layers tool, but when it comes to CSS layer analysis, Chrome Devtools is really bad.