This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

📢 Hello everyone, I am Xiao Cheng, a prospective sophomore front-end enthusiast

📢 this article will take you on a delightful tour of the differences between CSS and JS animation

📢 May you be true to yourself and love life

The introduction

Speaking of animation, of course, is very interesting, you can slide up and see the cover art above, is not quite cool, think I was written in code?

Of course not. Why would I want a number on a cover

Without further ado, in fact, the above GIF code is not very difficult to achieve, this image is made with canva.

This article mainly talks about the following contents

  1. Browser Rendering process
  2. Refluxing and repainting
  3. CSS animations
  4. JS animation
  5. Both comparisons

🍉 1. Browser rendering process

There are four main steps in the rendering process

  1. Parsing the HTML generates a DOM tree
  2. CSS styles are parsed to generate a CSSOM tree, which is combined with a DOM tree to generate a Render tree
  3. Render Tree lays out each node to determine its position on the screen
  4. Draw the Render Tree, traversing the Render Tree to draw out each node

To optimize the user experience, the rendering engine does not wait until the HTML has been parsed to create a layout rendering tree

Generate a DOM tree

DOM tree construction is a deep traversal process, meaning that the next sibling of the current node is not built until all child nodes have been built

Generate the Render tree

The CSSOM Tree will be generated when the DOM Tree is generated, and the Render Tree will be constructed according to the CSSOM and DOM Tree. The Render Tree includes rectangles of color, size and other display attributes

DOM tree and Render tree

🍋 2. Reflow and redraw

Key concepts in CSS

backflow

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

Each backflow rerenders the content of the page, but our eyes don’t notice any change, but it does clear the page, and then renders it from left to right, top to bottom, the first pixel in the upper left corner of the page. Each backflow does the same thing, but it doesn’t feel it

The node in the render tree changes, affecting the geometry of the node and causing the node position to change, which triggers the browser to backflow and regenerate the render tree.

Common geometric properties: layout, dimensions these can be measured with a ruler

  • Display, float, grid
  • Width, padding

Etc.

redraw

Redraw refers to changing appearance properties without affecting the rendering of collection properties, such as colors. The effect of repainting is not as strong as that of reflow.

The nodes of the rendered tree change without affecting the collection properties of that node, and the browser performance cost of backflow is much higher than that of redrawing. And backflow necessarily leads to repainting, which does not necessarily require backflow

Appearance attributes

  • Clip, background
  • text

Etc.

With that in mind, let’s talk about CSS animation

🍍 3. CSS3 animation

We are only talking about CSS3 animations here

CSS3 animation is also called tween animation because only the key frame position needs to be added and other undefined frames are automatically generated

Because we only set the position of a few key frames, it was difficult to control the animation. It was not easy to pause the animation halfway, or to add other actions during the animation

But CSS animations also have many benefits

  • The browser can optimize the animation
  • For browsers with poor frame rates, CSS3 can naturally degrade compatibility
  • The code is simple and the tuning direction is fixed

🍎 4. JS animation

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

But it also has many advantages

  • Fine animation
  • Controllable high
  • Cool advanced animation

💯 5. Compare CSS animation with JS animation

In front of the CSS animation and JS animation, are some conceptual strong things, don’t look at it

Having said all that, why should CSS animations be more efficient?

The first point

In terms of the complexity of implementing animations, CSS animations are mostly tween animations, while JS animations are frame by frame. Of course we don’t talk about implementation 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 efficiency. Earlier we talked about backflow and redraw. If we were to manipulate an element to move it to the right, we might need to control the dom.style.left property to change the position of the element each time, and combined with what we said, geometry changes must cause backflow, backflow must cause redraw. Imagine if we use JS to achieve animation, how much this cost, which will cause the browser in the continuous calculation of the page, resulting in the browser memory pile up. At the same time, because JavaScript is running in the main thread of the browser, there are other important tasks running in the main thread, which can be interfered with and cause the thread to block, thus losing frames

CSS animations run in the composite thread, do not block the main thread, and actions done in the composite thread do not trigger backflow and redraw

Of course, there is another important point: JS animations run on the CPU, while CSS animations run on the GPU

In general, CSS animation is less expensive to render, and it is more efficient to execute than JavaScript animation

So when do we use CSS animation and when do we use JS animation?

I personally feel that

As long as you can use CSS to achieve the animation, do not use JS to achieve, you can use CSS preprocessor to do more complex animation, just like I used SCSS to do meteor shower animation

If the animation is relatively complex, we can use JS + Canvas to try to see if it can be realized

Finally, consider a pure JS implementation

This article may have a lot to discuss, what do you think or different views can be exchanged with the following ~

Thank you very much for reading, welcome to put forward your opinion, if you have any questions, please point out, thank you! 🎈