CSS animation principle and hardware acceleration

First, the layer

Layers are cascading contexts, specific concepts and applications you can see the CSS cascading context and stacking order that I had previously transferred from Zhang Xin, where we briefly review the reasons for cascading contexts.

1. Root Cascade Context
Refers to the page root element, which is the default initiator element of the scroll bar . This is why the absolute positioning element is left positioned top relative to the browser window if there is no other anchor element limit when the/equivalence is positioned.

2. Positioning elements and traditional cascading contexts
For anchored elements that contain a position:relative /and position:absolute the Firefox/ie browser (excluding chrome and other WebKit kernel browsers) (currently, that is, at the beginning of 2016) position:fixed , the positioned element that contains the declaration, when its z-index value is not auto , a cascading context is created.

3.CSS3 and the cascade context of the new era

The following conditions create a new cascading context:

• root element (HTML)

• Absolute or relative positioning and z-index the value is notauto

• A scaling item Flex Item , and the z-index value is not auto , that is, the parent elementdisplay: flex|inline-flex

• The attribute value of the element is opacity less than 1

• The attribute value of the element is transform notnone

• The attribute value of the element is mix-blend-mode notnormal

• The attribute value of the element is filter notnormal

• The attribute value of the element isolation isisolate

• position: fixed

• will-changeYou specify any of these properties, even if you do not directly define them

• The attribute value of the element -webkit-overflow-scrolling istouch

Second, the use of absolute positioning +top/left to achieve animation

The green stripe in the data represents the top left repaint operation that occurs when the animation is used and implemented, from which you can see that the number of animation frames is much lower than the 60 frame.

By selecting the "Rendering" panel from Chrome's developer tools ESC , we can further monitor repaint operations by selecting "Enable piant flashing". When this option is turned on, the repaint area in the page is highlighted by a green mask. Re top -use and left the sample demo, you will find that the area that wraps the ball will always blink a green mask.

In common sense, changing the position of an element creates a rearrangement, why is it all redrawn in the image above? The reason is that absolute positioning creates a new layer with only the current element on it, and more than just redrawing, not reflow. This also tells us that in the same layer, with a small number of elements, the rearrangement performance is better and faster.

Three, transform2d realization animation

Is the data detected using CSS transform:

As you can see, there are not too many repaint operations during an animated presentation.

So why transform not trigger the repaint? In short, transform animations are controlled by the GPU, support hardware acceleration, and do not require software rendering.

Four, hardware acceleration principle

When a browser receives a page document, it resolves the markup language in the document to the DOM tree. The DOM tree and CSS combine to form the rendering tree of the browser build page. The rendering tree contains a large number of render elements, each of which is divided into a layer, each of which is loaded onto the GPU to form a render texture, and the layer transform does not trigger repaint in the GPU, and eventually the transform layers used are processed by separate synth processes.

In our example, the CSS transform creates a new composite layer that can be used directly by the GPU to perform transform operations. When the show layer borders option is turned on in the chrome developer tool, each composite layer displays a yellow border:

The ball in the example is in a separate composite layer, and the changes are independent when moving:

At this point, you may ask: When will the browser create a separate composite layer? In fact, generally in the following cases:

• 3D or CSS Transform
• <video>and <canvas> Labels
• CSS Filters
• When an element is overwritten, such as using a z-index property

Wait a minute, the above example uses 2D transition instead of 3D transforms AH? This is true, so in timeline we can see that the animation starts and ends with a two-time repaint operation.

　　the difference between the 2D and transform is that the browser creates a separate composite layer for 3D animations before the page is rendered, while the 2D animation is created during the run. When the animation starts, a new composite layer is generated and loaded as a GPU texture for initializing the repaint. The GPU's composite then manipulates the execution of the entire animation. Finally, when the animation finishes, perform the repaint operation again to delete the composite layer.

V. Force GPU Rendering

Not all CSS properties can trigger hardware acceleration of the GPU (the layer's property changes in the GPU do not trigger repaint), and actually only a few properties, such as the following:

• transform
• opacity
• filter

To avoid the repaint action that occurs at the beginning and end of the 2D transform animation, we can hard code some styles to solve this problem:

. example1 {  Transform:translatez (0);}. example2 {  Transform:rotatez (360deg);}

The function of this code is to let the browser execute 3D transform. The browser creates a separate layer from the style, and the animations in the layer are preprocessed by the GPU and trigger hardware acceleration.

If there is a complex element behind an element, the repaint operation of the element consumes a lot of resources, and the above techniques can be used to reduce the performance overhead.

Vi. use of hardware acceleration issues

Using hardware acceleration is not a perfect thing, such as:

• Memory. If the GPU loads a lot of textures, then it's easy to get content problems, which is especially noticeable on mobile browsers, so be sure to keep in mind that you don't use hardware acceleration for every element of the page.
• Using GPU rendering can affect the anti-aliasing effect of the font. This is because the GPU and CPU have different rendering mechanisms. Even if the final hardware acceleration is stopped, the text will appear blurry during the animation.

Vii. Summary

Feel the logic here is very messy, here to tidy up a bit. First transform and absolute positioning will produce new layers, so there is no reflow, the layer transform in the GPU does not cause repainting, which is the principle of hardware acceleration. In addition, the difference between Transform3D and 2D is that a new layer is generated before the 3D rendering, and 2D is a layer generated at run time and deleted at the end of the run.

Note: This article in the north and south in the book on the "CSS Animation hardware Acceleration" in the knowledge points, and added their own understanding and summary

CSS animation principle and hardware acceleration