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.

Why is CSS animation more efficient than JavaScript controlled animation?

Before we think about that, let’s look at a few concepts:

  1. rearrangement
  2. redraw
  3. synthetic

1. Necessary knowledge

1. Layout

Definition: When you modify the geometry of an element using JS or CSS, such as changing the width or height of the element, the browser will trigger a rearrangement, a series of sub-stages after parsing. This process is called rearrangement. Undoubtedly, the rearrangement requires updating the completed rendering pipeline, so it is also the most expensive.

Trigger conditions for rearrangement:

  • Add or remove visible DOM elements
  • Element position change
  • Element size change
  • Element content changes (e.g., one text is replaced by another image of a different size)
  • Page render initialization (unavoidable)
  • Browser window size changed

2. Repaint

Definition: When changing modifying elements drawn by js or CSS properties, changes the background color of the elements, for example, the layout phase will not be implemented, because there is no cause the transformation of geometric position, so it directly into the rendering stage (that is, generate draw list), and then execute after a series of stages, this process is called re-paint, compared with rearrangement, Redraw eliminates the need for layout and layering, so execution is more efficient than scheduling

Triggering conditions:

  • The background
  • The outline attribute
  • The box – shadow attributes
  • Border properties
  • visibility

3. Composite

Definition:

Change a property that does neither layout nor draw, and the rendering engine skips layout and draw and only performs subsequent compositing operations, which we call compositing. For example, if we use the TRANSFORM property of CSS to animate the effect, we can avoid rearranging and redrawing and perform the compositing animation directly on the non-main thread. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency

Triggering conditions:

  • will-change
  • Transform property change
  • Whole layer geometry changes, opacity changes, shadows

2. Why is CSS more efficient than JS

See here, I believe we have the answer in mind: is not CSS animation can directly trigger merge, avoid redraw and rearrangement! So CSS animations are more efficient than JS animations. The conclusion is correct, but not entirely. Because CSS and JS are not absolutely efficient, but in some cases, each has its own advantages.

Now that we know how efficient CSS is in some areas, can we compare it to JS to see when CSS works better and when JS works better? Of course we can. After all, our code is to find the best solution among the various choices.

3. How to choose between CSS animation and JS animation under different requirements

The main thread maintains a Layer tree and manages the TiledLayer. The non-main thread maintains the same LayerTreeHostImpl and manages the LayerImpl. The content of the two trees is a copy relationship. So it doesn’t interfere with each other, and while Javascript is manipulating LayerTreeHost in the main thread, the non-main thread can render with LayerTreeHostImpl. Compositing to the screen is also smooth when Javascript is busy and the main thread gets stuck. To prevent false death, mouse and keyboard messages are first distributed to the non-main thread, and then to the main thread. In this way, when the main thread is busy, the non-main thread can still respond to a portion of the message. For example, if the main thread is busy during mouse scrolling, the non-main thread will also process the scrolling message, scrolling the part of the page that has been committed (the part that has not been committed will be whitewashed).

Then we can conclude that the premise of CSS animation is smoother than JS animation:

  • Js performs some expensive tasks

  • Also CSS animations do not trigger rearrangements and redraws

    When a CSS animation or JS animation triggers rearrangement and redraw, the main thread is required to recalculate the Layer tree, and then the CSS animation or JS animation blocks subsequent operations.

Refer to CSS Triggers to qualify “Only Composite, not layout or Repaint” with changes to the following properties:

  • backface-visibility
  • opacity
  • perspective
  • perspective-origin
  • transfrom

This advantage of CSS animation can only be taken advantage of if 3D acceleration or opacity modification is used.

Therefore, in most application scenarios, the efficiency perspective is more concerned with the following issues.

  • Whether rearrangement is caused?
  • Repaint the area
  • Is there a high-cost attribute (CSS shadow, etc.)
  • Whether to enable hardware acceleration

4. Differences between CSS animation and JS animation

Above, come up with today’s concise comparison section. The main difference between CSS animation and JS animation today is

  • Function coverage, JS is larger than CSS3

    • Defines the animation process@keyframesRecursive definition is not supported, if there are many similar animation processes, need to adjust multiple parameters to generate, there will be a lot of redundancy (such as jQuery Mobile animation scheme), while JS can naturally achieve multiple different animation processes in a set of functions
    • On a time scale,@keyframesAnimation granularity is coarse, and JS animation granularity control can be very fine
    • CSS3 animation is supported by the time function is very few, not flexible enough
    • With the current interface, CSS3 animations cannot support more than two state transitions

  • CSS3 is easier than JS, and the direction of performance tuning is fixed

  • For older browsers with poor frame rate performance, CSS3 can degrade naturally, and JS requires additional code to be written

  • CSS animations have natural event support (TransitionEnd, AnimationEnd, but they need to be prefixed for browsers), whereas JS needs to write its own events

  • CSS3 has compatibility issues, while JS has no compatibility issues most of the time