Author: Traceability

1. Introduction

The relationship between browser and front-end development is self-evident, and understanding the rendering principle of browser can help us improve page performance and solve some problems in rendering. When I was developing a mobile H5 page recently, I encountered a strange problem. On a list page, when I switched TAB on the latest version of IOS phone, the countdown in the upper left corner flickered. Let’s take a look at some effects.

Rough code structure

The DOM structure is normal and the style is consistent with that of other phones. What is the problem? I think it’s probably a rendering problem in the latest IOS browser. Speaking of this rendering problem, my first thought was to use GPU rendering to upgrade to a composite layer, so I added a short line of code will-change: Transform to the DOM of the countdown. The problem was solved smoothly, and the rendering of the countdown module was not affected by other contents. Why add this code to use GPU rendering and upgrade to compositing layer? And what is the composition layer? Let’s take a look.

2. Browser rendering process

Before discussing the composition layer, let’s take a brief look at browser rendering. Common browser rendering engines are Webkit/Gecko, etc. Their main rendering process is basically the same. Here we will mainly discuss Webkit simplified rendering process.

  • The browser downloads and parses the HTML.
  • To deal withCSSbuildCSSOMTrees, to generateDOMThe tree.
  • DOM 与 CSSOMMerge into oneRenderThe tree.
  • There are theRender Tree, the browser can know the nodeCSSDefine and their dependencies to figure out where each node is on the screen, generating a canvas large enough to accommodate all elements.
  • Synthesize layers of information provided by the browser and display them on the screen.

The main character of this article is Compositing Layers in the last step of the process. Some of these Compositing Layers are known as Compositing Layers. Let’s take a look at their origins.

3. About the synthetic layer

3.1 What is a Compositing Layer

First compositing is the technique of dividing the parts of a page into multiple layers, rasterizing them individually (the process by which the browser converts them into pixels on the screen based on the structure of the document, the style of each element, the geometry of the page, and the drawing order) and compositing them into a single page in a synthesizer thread.

To see the layer structure of the page, open the Custom menu in Chrome Development Tools and select the Layers option in More Tools.

This way you can look at the layer structure of the page, see the demo for details.

In general, a rendering layer with certain attributes is automatically promoted to a compositing layer by the browser. The composition layer has a separate layer (GraphicsLayer) that has no influence on other layers. Other render layers that are not composite layers share the same content as the first parent layer that has a layer, which is the content of the normal document flow. Let’s look at some of the properties that are commonly promoted to composite layers.

  • Set up thetransform: translateZ(0)Notice that it has to betranslateZBecause it uses a GPU to computeperspective distortion(Perspective distortion).perspectiveIs an important property in 3D design, interested students can seeThe informationTake a look. If you usetranslateX 或 translateYElements will be drawn in the normal document flowdemo.
  • Backface-visibility: Hidden Specifies whether the demo is visible when the back of the element is facing the observer.
  • will-changeThis property tells the browser how the element will change, so that the browser can prepare for optimization in advance. When the value of this property is opacity, transform, top, left, bottom, and rightdemo.
  • video,canvas,iframeAnd other elements.

3.2 On implicit composition

Implicit composition is a situation that is promoted to the composition layer by default in certain scenarios. We can look at the previous layer structure demo again. If we swap the z-index of B and C, we can see that B is implicitly promoted to the composite layer.

If we adjust the position of B a little bit more, so that B does not intersect with C or D, then you will see that B is not implicitly promoted to the composite layer this time.

Therefore, to quote the description of implicit composition in CSS GPU Animation, it is:

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 on top of the composite elements in the stack order and will be promoted to the composite layer.

3.3 Layer compression and layer explosion

In the example we just described, if there is a composition element at the bottom of the stack order, does that result in a large number of elements in the stack order being promoted to the composition layer? In most cases, we don’t pay attention to the composition of layers during development, so the situation we just described is likely to happen. When these unexpected compositing layers reach a certain level, there will be a layer explosion, which will cause your page to consume a lot of memory resources, causing some unexpected situations. For example, when WKWebView (which is a multi-process component, meaning that memory is separated from APP memory into a separate process) exceeds the amount of memory allocated to it by the system, the browser crashes with a white screen, but the APP does not crash. This is something we don’t want to see, and browsers have some solutions to this problem. If multiple render layers overlap with the same composite layer, they are compressed into one layer to prevent layer explosion due to overlapping. Let’s look at the following code

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

Browsers have been getting better and better at optimizing this area in recent years. For example, let’s take a look at CSS3 hardware acceleration, which also has an interesting demo provided in the article. The page contains an H1 header that applies the animation to the Transform and is promoted to the composition layer. Due to the particularity of animation Transform (uncertainty of dynamic overlap), implicit synthesis can occur without overlapping, which results in all the rendering layers corresponding to nodes whose Z-index is higher in the page being promoted to synthesis layers, and finally thousands of synthesis layers are generated on the page. Then when I tested the example on my own computer, I suddenly noticed that thousands of compositing layers had disappeared and the page was very smooth. According to? My browser version is Chrome 96, and I went to Google’s history pack and eventually tested it and found that the issue was optimized in Chrome Releases 94.

Google Releases browser 93

Google Releases browser 96

A quick look at Chrome 94’s update log shows a fix:

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

Repair incorrect phenomena in synthesis

Because corresponding issues do not have permission to access, interested students can delve into it. The existence of layer compression does not mean that we can recklessly improve the synthesis layer, especially in some pages requiring high rendering speed, or the page itself loading speed is slow, we should pay attention to the page hierarchy, simplify the complexity of drawing, improve the performance of the page.

4. Advantages and disadvantages of synthetic layer

Render layer hints bring benefits:

  • When hardware acceleration is enabled, the bitmap of the composition layer is handed overGPUSynthesis, compared toCPUDeal with it quickly.
  • Synthetic layer generationrepaint“Does not affect other layers.
  • fortransform 和 opacityEffect, does not triggerlayout 和 paint.

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

  • If we just leave all the rendering to itGPUUnder current optimizations, it can lead to a significant increase in rendering memory footprint, which can have a negative effect.
  • In addition, implicit composition tends to produce a large number of composition layers that we do not expect. Excessive memory usage can make pages sluggish and performance optimization counterproductive.

5. To summarize

5.1 Implement animations using transform and opacity

In our daily development we often implement some animation, sometimes we may choose to change the top/left to implement, so that the node rendering will occur in the normal document flow. While using transform and opacity to implement animation allows nodes to be placed in an independent composite layer for rendering, without affecting other layers. Moreover, GPU rendering is faster than CPU rendering, which makes your animation more smooth. Let’s take a look at their differences.

Left to animate:

Transform to animate:

As you can see, if you animate a transform, the FPS of the page stays around 60, while if you animate a Left, the FPS stays around 30, which affects your user experience metrics.

Note: View the frame rate of the interface wake up method

If you are not sure whether it makes sense to use this property, you can check the effect of this property on the rendering pipeline on csStriggers before you use any CSS properties to implement animations.

5.2 Use will-change with Caution

I think unless you have an element that actually has an attribute that will change soon, such as a transform, you can use will-change: transform to tell the browser that depending on which element you want to change, the browser may be able to pre-schedule that element change and render faster. However, these properties can cause you some side effects. Let’s look at a demo.

Any child element with position: fixed or position: Absolute will be positioned relative to elements with will-change: transform set. So you need to make sure that the unexpected containing block doesn’t affect you when you use it. In addition, the further optimizations that browsers use for will-change are often more expensive, and it’s a waste if you apply it to too many attributes, or even if you use it too much, the page may slow down or crash.

5.3 Reduce the drawing area of the composite layer

The size of the composition layer’s drawing area greatly affects its memory footprint.

You can see that A is 5 times the size of B, and we scaled B to 200 × 200 pixels by transform: Scale (5), but there was A 25-fold difference in memory usage. You can save a lot of memory without the user seeing the difference. Of course, this example only applies to scenes with solid colors, and we need to see the effect of drawing areas on memory usage.

The relevant data

  • 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 is published from NetEase Cloud Music big front end team, the article is prohibited to be reproduced in any form without authorization. Grp.music – Fe (at) Corp.Netease.com We recruit front-end, iOS and Android all year long. If you are ready to change your job and you like cloud music, join us!