Shulou(Shulou.com)06/02 Report--

Editor to share with you what is the reason for the high performance of animation in css3, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The reasons for high performance: 1, css is a Keyframe animation, the motion tween is completed by the browser, and the browser can optimize the animation; 2, the code is simple, and the direction of performance tuning is fixed; 3, the CSS animation runs in the composite thread and does not block the main thread, and the actions completed in the synthesis thread will not trigger reflux and redrawing, so the rendering cost is low.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Rendering flow of the browser

There are four main steps in the rendering process

Parsing HTML to generate DOM Tree

Parse CSS style to generate CSSOM tree, and combine CSSOM tree with DOM tree to generate Render tree

Layout Render Tree lays out each node to determine its position on the screen

Draw the Render Tree, traverse the render tree and draw each node

To optimize the user experience, the rendering engine does not wait for HTML parsing before creating a layout render tree

Generate DOM tree

The construction of the DOM tree is a deep traversal process, that is, only after all the child nodes have been built will the next sibling node of the current node be built.

Generate Render tree

When the DOM tree is generated, the CSSOM tree is generated, and the Render Tree is built according to the CSSOM and DOM trees. The rendered tree includes a rectangle with display attributes such as color, size, and so on.

DOM tree and Render tree

two。 Reflow and redraw

Critical concepts in CSS

Reflux

Backflow, also known as rearrangement, refers to a rendering whose geometric properties need to be changed.

Every backflow will re-render the content of the web page, but our eyes can't feel any change, but it does empty the page. From the first pixel in the upper left corner of the page from left to right, from top to bottom, every backflow will be like this process, just can't feel it.

The node of the render tree changes, affecting the geometric properties of the node, resulting in a change in the location of the node, which triggers the browser to flow back and regenerate the render tree.

Common geometric attributes: layout, size, which can be measured with a ruler.

Display 、 float 、 grid

Width 、 padding

Etc.

Redraw

Redrawing refers to rendering that changes appearance properties without affecting collection properties, similar to colors. Compared with redrawing, the effect of redrawing will not be so strong.

The node of the rendering tree changes, but does not affect the collection properties of the node, and reflux consumes much more browser performance than redrawing. And reflow will inevitably lead to redrawing, redrawing does not necessarily need reflow.

Appearance attribute

Clip,background

Text

Etc.

After introducing this knowledge, let's talk about CSS animation.

3. CSS3 animation

Here we only talk about the animation of CSS3.

CSS3 animation is also called motion tween because only the position of the Keyframe needs to be added and other undefined frames will be generated automatically.

Because we only set the position of a few keyframes, it is difficult to control the animation. It is not easy to pause the animation halfway or add some other operations during the animation process.

But CSS animation also has many benefits.

The browser can optimize the animation.

For browsers with poor frame rate, CSS3 can naturally downgrade compatibility.

The code is simple and the performance tuning direction is fixed.

4. JS animation

First of all, JS animation is frame-by-frame animation, drawing content on the time frame, frame by frame, so it is highly reproducible and can complete almost any animation form you want. However, due to the different content of frame-by-frame animation, it will increase the burden of production and occupy a large amount of resource space.

But it also has many advantages.

Exquisite animation

High controllability

Cool advanced animation

5. Comparison between CSS animation and JS animation

The previous CSS animation and JS animation are some conceptual things, it doesn't matter if we don't look at them.

Having said so much, why on earth should CSS animation be more efficient?

The first point

From the complexity of implementing animation, CSS animation is mostly a motion tween, while JS animation is frame-by-frame animation. Of course, we don't talk about the effect of realization here.

The second point

Efficient coding, using JS to achieve animation, no matter how simple animation, need to control the whole process, of course, you may say that you can use some libraries to solve these problems, but the actual operation of these libraries may be much less efficient than the native implementation.

The third point

Performance is efficient, we talked about reflow and redrawing earlier, if we want to move an element to the right, we may need to control the dom.style.left attribute to change the position of the element each time, and combined with what we said, the change of geometric attributes will inevitably lead to reflow, reflow will inevitably lead to redrawing, we can imagine how much it will cost if we use JS to achieve animation. This will cause the browser to constantly calculate the pages, resulting in the accumulation of browser memory. At the same time, because JavaScript runs in the main thread of the browser, there are other important tasks running in the main thread, so it may be interfered to cause the thread to block and lose the frame.

On the other hand, the animation of CSS runs in the compositing thread and does not block the main thread, and the actions completed in the compositing thread do not trigger backflow and redrawing.

Of course, there is another important point: JS animation runs on CPU, while CSS animation runs on GPU.

Generally speaking, the rendering cost of CSS animation is low, and its execution efficiency is higher than that of JavaScript animation.

These are all the contents of this article entitled "what is the reason for the high performance of animation in css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.