The composition layer of the browser rendering magic

Author of this article: Tracing

1 Introduction

The relationship between browsers and front-end development is self-evident, and understanding the rendering principles of browsers can help us improve page performance and solve some rendering problems. When I was developing a mobile H5 page recently, I encountered a strange problem. When a list page switched tabs on the latest version of IOS phones, the countdown in the upper left corner flickered. Let's see some effects.

Approximate code structure

I checked through the plug-in that the DOM structure is normal and the style is the same as that on other phones. What's the problem? I think most likely it is the rendering problem of the latest version of IOS browser. Speaking of this kind of rendering problem, the first thing I thought of was to use GPU rendering to upgrade to the compositing layer, so I added a short line of code will-change:transform to the countdown DOM. The problem was solved smoothly, and the rendering of the countdown module was not affected by others. The impact of content. Why add this code to use GPU rendering and upgrade to composition layer? what is the composite layer of 161d2d73c50166? Let's take a look together.

2. Browser rendering process

Before discussing the composition layer, let’s take a brief look at browser rendering. The common rendering engines of browsers are Webkit/Gecko, etc. Their main rendering processes are basically the same. Here we mainly discuss the simplified rendering process of WebKit.

• The browser downloads and parses the HTML.
• Process CSS construct a CSSOM tree and generate a DOM tree.
• DOM and CSSOM merge into a Render tree.
• With Render Tree , the browser can know the CSS definition of each node and their affiliation, so as to calculate the position of each node on the screen, and generate a canvas large enough to accommodate all elements.
• According to the information provided by the browser, the layers are synthesized and displayed on the screen.

The protagonist of this article composite layer appeared in the last step of the process, some special layers of these composite layers are considered composite layers (Compositing Layers), let's take a look at its origin.

3. About the composite layer

3.1 What is Compositing Layer

The first synthesis is to divide the various parts of the page into multiple layers and separate rasterization (the browser converts them into pixels on the screen according to the structure of the document, the style of each element, the geometry of the page and the drawing order). The technology of synthesizing a page in a synthesizer thread.

How to observe the layer structure of the page, you need Chrome development tool, and then select the Layers option in More tools.

In this way, you can observe the layer structure of the page, see demo .

Generally speaking, a rendering layer with some specific properties will be automatically promoted to a composite layer by the browser. The composite layer has a separate layer (GraphicsLayer), which has no influence on other layers. Other rendering layers that are not composite layers share one with the first parent layer that has a layer, that is, the content in the ordinary document stream. Let's look at some common attributes that are promoted to composite layers.

• Set transform: translateZ(0) , note that it must be translateZ , because it uses GPU to calculate perspective distortion (perspective distortion). perspective is an important attribute in 3D design. Students who are interested can read this information understand. If you use translateX or translateY , the element will be drawn in the normal document flow demo .
• backface-visibility: hidden specifies whether the element is visible when the back of the element faces the viewer. demo .
• will-change This attribute tells the browser what changes the element will have, so that the browser can make preparations for optimization in advance. When the value of this attribute is opacity, transform, top, left, bottom, right, demo .
• video , canvas , iframe and other elements.

3.2 About implicit synthesis

Implicit compositing means that in a specific scenario, there is a situation where it will be promoted to a compositing layer by default. Specifically, we can look at the demo previous layer structure. As long as we z-index B and C, you will find that B is implicitly promoted to a composite layer.

Is it just z-index . If we adjust the position of some B to ensure that B does not intersect with C and D, then you will find that B is not implicitly promoted to the composite layer this time.

So to quote the description of implicit synthesis in CSS GPU Animation

This is called implicit compositing: One or more non-composited elements that should appear above a composited one in the stacking order are promoted to composite layers — i.e. painted to separate images that are then sent to the GPU.
One or more non-composite elements should appear above the composite element in the stacking order and will be promoted to a composite layer.

3.3 Layer compression and layer explosion

According to the example we just said, if there is a composite element at the bottom of the stacking order, will it cause a large number of elements in the stacking order to be promoted to a composite layer? In fact, in most cases, we do not pay attention to the problem of layer synthesis during the development process, so the situation we just said may happen. When these undesired synthesis layers reach a certain magnitude, the layer will explode, which will cause your page to take up a lot of memory resources and bring some unexpected situations. For example, when the WKWebView ( WKWebView is a multi-process component, which means that the memory will be separated from the APP memory into a separate process) exceeds the memory allocated to it by the system, the browser will crash with a white screen, but the APP will not crash . This is a situation we don’t want to see. The browser also has some corresponding solutions to this problem. If multiple rendering layers overlap with the same composite layer, these rendering layers will be compressed into one layer to prevent Overlap causes the explosion layer.
Let's look at the following code

B, C, and D should all be promoted to composite layers, but due to layer compression, they will be rendered in one layer.

In recent years, this browser optimized to do better and better, for example, we look at a CSS3 hardware acceleration pit an interesting article provided Demo . The page contains an h1 title, transform applies animation animation to 061d2d73c5056e, so it is promoted to a composite layer. Due to animation transform (dynamic overlap uncertainty), implicit composition can also occur without overlap, which results in all rendering layers corresponding to nodes higher than z-index In the end, thousands of synthetic layers were generated on this page. Then when I tested this example on my computer, I suddenly found that thousands of composite layers had disappeared, and the page was exceptionally smooth. Why? My browser version is Chrome 96. I searched for Google’s history package, and finally tested and found that this problem was optimized in the Chrome 94 Releases version.

Google Chrome 93 Releases version

Google Chrome 96 Releases version

Look a bit Chrome 94 updated log , which refers to a repair content:

1238944 Medium CVE-2021-37966 : Inappropriate implementation in Compositing. Reported by Mohit Raj (shadow2639) on 2021-08-11

Repair the incorrect phenomenon in the synthesis

Because the corresponding issues do not have permission to access, students who are interested can investigate it. layer compression does not mean that we can unscrupulously improve the composition layer, especially in some pages that require high rendering speed, or pages that load slowly, we should pay attention to the hierarchical structure of the page to simplify the complexity of drawing Degree to improve the performance of the page.

4. The pros and cons of the composite layer

The benefits of the hints of the rendering layer:

• Open hardware acceleration, the bitmap will be referred to synthetic layer GPU synthesis, compared CPU process faster.
• When the composite layer occurs repaint , it will not affect other layers.
• For transform and opacity layout and paint will not be triggered.

Of course, there are some problems with the composite layer:

• If we hand over all the rendering work to GPU , under the existing optimization, it will lead to a significant increase in the rendering memory footprint, but negative effects will occur.
• In addition, implicit synthesis is prone to produce a large number of synthesis layers that we did not expect. Excessive memory usage will make the page become stuck, and performance optimization backfires.

5. Summary

5.1 Use transform and opacity to achieve animation

In our daily development, we often implement some animations. Sometimes we may choose to change the top/left to achieve, then the rendering of this node will occur in the ordinary document stream. The use of transform and opacity achieve animation enables nodes to be placed in an independent composite layer for rendering. The animation will not affect other layers, and GPU rendering can be faster than CPU, which will make your animation smoother , Let’s take a look at their differences.

Realize the animation through left

Realize the animation through transform

You can see that through transform to achieve animation, the page's fps can be stabilized at about 60, and through left to achieve fluctuations, fps probably stabilized at about 30, which will affect your user experience indicators.

Note: The interface wake-up method to check the frame rate

If you are not sure whether it is reasonable to use this property, you can check the effect of this property on the rendering pipeline csstriggers

5.2 Use will-change with caution

I think unless your element really exists, a certain attribute will change immediately, such as transform , you can use will-change: transform inform the browser, depending on the element you intend to change, the browser may be able to pre-arrange the element change and rendering speed Become faster. But these attributes may bring you some side effects. Let's take a look at a demo .

Any position: fixed or position: absolute will be positioned relative to the element will-change: transform So when you use it, you need to make sure that this unexpected containing block will not affect you. will-change attribute used by the browser will often consume more resources. If you apply it to too many attributes, it is obviously a waste, and even more excessive use may cause the page The corresponding speed slows down or crashes directly.

5.3 Reduce the drawing area of the composite layer

The size of the drawing area of the composite layer greatly affects its memory usage. Let's take the following example:

It can be seen A the size of B is 5 times that of transform: scale(5) . We zoomed in B to 200 × 200 pixels by 061d2d73c508f2, but their memory footprint is different by 25 times as much as 061d2d73c508f1. You can save a lot of memory on the premise that the user can't see any difference. Of course, this example is only suitable for such a pure color scene, what we need to see is the impact of the drawing area on the memory occupation.

Relevant information

• CSS GPU Animation: Doing It Right
• Stick to Compositor-Only Properties and Manage Layer Count
• Eliminate content repaints with the new Layers panel in Chrome
• wireless performance optimization: Composite
• Layers and how to force them
• GPU Accelerated Compositing in Chrome
• Layers and how to force them
• Inside look at modern web browser (part 3)

This article was published from , the big front-end team of NetEase Cloud Music. Any unauthorized reprinting of the article is prohibited. We recruit front-end, iOS, and Android all year round. If you are ready to change jobs and you happen to like cloud music, then join us at grp.music-fe (at) corp.netease.com!