Detail on layer composite

I recently wrote a post on how to optimize Amap animation using Chrome DevTools, which mentioned composite but didn’t go into detail. After thinking for a long time, I still feel the need to summarize.

What is composite?

In plain English: Each node in the DOM tree corresponds to a LayoutObject. When their LayoutObject is in the same coordinate space, a RenderLayers will be formed, that is, the rendering layer. RenderLayers ensure that the page elements are composited in the correct order, resulting in a composite that handles the display of transparent and overlapping elements correctly.

Once the page is loaded and parsed, it is represented in the browser as a structure familiar to many Web developers: the DOM. However, when rendering a page, the browser has a series of intermediate representations that are not directly exposed to the developer. The most important of these structures are layers.

At this point, the idea of a layer is there. Composite translates to “composite”, so how does it work?

RenderLayers and GraphicsLayers

3. Implicit composite

For implicit composition, CSS GPU Animation describes it as follows:

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.

Let’s take a look at the following illustration:

Suppose A scene, we need A to be displayed on B, and then add moving animation for B, there will be A logical problem: B is promoted to the synthesis layer because of animation, and the screen image is finally synthesized on GPU, while A needs to be displayed on B, we do not do any processing. So in order for A and B to display properly, we need to set z-Index, and the browser will force A to be promoted to the composite layer, followed by repaint.

At this point, composite implicit composition appears. Of course, there are more scenarios, so let’s move on.

4. Factors affecting composite

Five, layer compression and layer explosion

1. Layer compression: Similar to the example of implicit layer composition, simple overlapping may result in a large number of composite layers, which will consume a lot of innocent CPU and memory resources, and seriously affect the performance of the page. The browser takes this into account, so Layer Squashing comes into play.

Automatic layer compression in browsers is also not a panacea, and there are many specific situations where it is impossible for browsers to layer compress.

• Unable to perform compression that would break the render order
• The render layer of the video element cannot be compressed and other render layers cannot be compressed onto the compositing layer where the video is located
• The iframe/Plugin rendering layer cannot be compressed and other rendering layers cannot be compressed into the compositing layer
• Unable to compress a reflection properties of rendering layer (squashingReflectionDisallowed)
• Unable to compress a blend mode attribute of the render layer (squashingBlendingDisallowed)
• When rendering with composite layer with different cutting container (clipping container), unable to compress the render layer (squashingClippingContainerMismatch)
• Relative to the synthesis of rolling rendering layer cannot be compressed (scrollsWithRespectToSquashingLayer)
• When rendering layer with synthetic have different opacity of the ancestral planes (a set the opacity and less than 1, a not set opacity, is different), unable to compress the render layer (squashingOpacityAncestorMismatch, With squashingClippingContainerMismatch)
• When rendering with synthetic layers have different with the transform of the ancestral planes, unable to compress the render layer (squashingTransformAncestorMismatch, ditto)
• When rendering layer with synthetic have different with the ancestors of the filter layer, unable to compress the render layer (squashingFilterAncestorMismatch, ditto)
• When the cover layer synthetic running animation, unable to compress the render layer (squashingLayerIsAnimating), when the movie did not start or run is completed, the render layer can be compressed

Wireless performance optimization: Composite

If multiple render layers overlap with a composite layer, they are compressed into a Single GraphicsLayer to prevent possible “layer explosions” due to overlapping.

2. Layer explosion: From the previous introduction, we know that overlapping compositing layers also causes elements to be promoted to compositing layers. Despite the browser’s layer compression mechanism, there are many cases where compression is not possible. In other words, in addition to the explicitly declared composite layers, some unexpected composite layers may be inadvertently generated due to overlapping reasons, and a large number of additional composite layers may be generated at the extreme, resulting in the phenomenon of layer explosion.

To solve the problem of layer explosion, the best solution is to break the condition of overlap, that is to say, let other elements not overlap with elements of composite layer, such as clever use of z-index attribute.

Six, memory consumption

<! -- jartto test --> <div id="a"></div> <div id="b"></div>Copy the code

#a, #b {
 will-change: transform;
}
#a {
 width: 100px;
 height: 100px;
 background: rgb(255, 0, 0);
}
#b {
 width: 10px;
 height: 10px;
 background: rgb(255, 0, 0);
 transform: scale(10);
}Copy the code

Whereas, Reflowing and Repainting

Good, we can use the above to evaluate the memory consumption, which leads to the terms Reflow and Repaint, just to review:

• Reflow: The browser takes time to render, and when it finds that something has changed that affects the layout, it needs to go back and re-render.
• Repaint: Changing an element’s background color, text color, etc., will only cause the browser to Repaint a part of the element without affecting the surrounding or internal layout of the element.

Reflow takes more time than Repaint, which affects performance more. So when writing code, try to avoid too many reflows.

Reflow reasons:

• When the page is initialized;
• When manipulating DOM;
• The size of some elements has changed.
• If the properties of the CSS change.

Reduce reflow/repaint

• Don’t change the STYLE of the DOM line by line. Instead, define the CSS class in advance and change the DOM className.
• Do not place DOM node property values in a loop as variables in the loop.
• Use fixed or Absoult position for animated HTML elements, then modifying their CSS will not reflow.
• Never use a table layout. Because a small change can cause the entire table to be rearranged.

Hardware acceleration

#jartto {
  will-change: transform;
}Copy the code

#jartto {
  transform: translateZ(0);
}Copy the code

CPU (Central processing Unit) and GPU (Graphics Processing unit)

As CPU and GPU are mentioned repeatedly in this article, many children may wonder why hardware acceleration is enabled and what is the advantage of GPU?

Let’s first briefly understand the working principle of GPU. The process of GPU processing data is like this:

• Draw each composite layer into a separate image;
• Prepare layer data (size, offset, transparency, etc.);
• Prepare animation shaders (if applicable);
• Send data to GPU;

As you can see from the pu-Accelerated – Compositing-in-Chrome article, there are three benefits to hardware compositing:

1. Compositing layers on a GPU can be more efficient than a CPU (both in terms of speed and power consumption) in drawing and compositing operations involving large numbers of pixels. Hardware is designed for these types of workloads.
2. Content on the GPU does not require expensive read-back (e.g. accelerated video Canvas2D or WebGL).
3. Parallelism between CPU and GPU, which can be run simultaneously to create efficient graphics pipelines.

The images that make up the cache elements are faster, and this is the strength of the GPU: it can quickly compose images with sub-pixel precision, which adds significant smoothness to the animation.

To put it this way, a GPU is a separate computer: an important part of every modern device is actually a separate unit, with its own processor and its own memory and data processing model. Like any other application or game, the browser must talk to the GPU like an external device.

For more on gpus, see portal here, but I won’t go too far here.

X. Supplementary: Respective responsibilities of CPU and GPU

11. Tool use

We do not fight unprepared battle, reasonable use of tools, can greatly improve the efficiency of programming. Here is an article to optimize amap animation, including:

• Page performance detection
• Chrome Animation Debugger (Animations)
• Page Rendering (Rendering)
• Layers
• GPU and composite layer

Forgive me for the titletag, but what started out as a way to optimize amap animation ended up as a practical example, step-by-step introduction to Chrome DevTools. The article has been published, so I am not changing the title. If possible, I would like the title to be: Animation optimization how to use Chrome DevTools

12. Optimization suggestions

/* @frames move {from {left: 30px; } to { left: 100px; }}Copy the code

/* @keyframes move {from {transform: translateX(0); } to { transform: translateX(70px); }}Copy the code

Xiii. Conclusion

Optimization is actually a process, we need to deal with point by point, breakthrough. Nothing happens overnight, and there is no silver bullet. As high school physics books say about errors: “Errors are inevitable and can only be reduced.”

Optimization is the same, we can only do it, not force it. Try again, and you will never die.

Reference: Wireless performance optimization: Composite CSS GPU Animation Web optimization GPU-accelerated – Compositing-in-Chrome view rendering, CPU and GPU lag causes and optimization solutions