What is the difference between css3 animation and js animation

Difference: 1. The control ability of js animation is stronger than that of css3 animation; 2. The effect of js animation is richer than that of css3 animation; 3. In most cases, js animation does not have compatibility issues, while css3 animation has compatibility Problem; 4. The complexity of js animation is higher than that of css3 animation.

The operating environment of this tutorial: Windows 7 system, CSS3&&javascript version 1.8.5, Dell G3 computer.

JS Animation

Advantages:

• js animation control ability is strong, you can finely control the animation, start and pause during the animation process , termination and cancellation can all be done

• The animation effects are richer than css3 animation, such as curve movement, impact flashing, parallax scrolling effect, only js animation can complete

• JS animations have no compatibility issues in most cases, while CSS3 animations have compatibility issues

Disadvantages

• The complexity of js animation is higher than that of css3

• js is executed in the main thread of the animation browser, and the main thread also has other javaScript scripts, style calculation, layout, drawing tasks, etc., for Its interference may cause blocking and frame loss.

• js animation often requires frequent manipulation of the css properties of the DOM to achieve visual animation effects. At this time, the browser must continue to execute Redrawing and reflowing consume a lot of performance, especially on mobile terminals where the memory allocated to the browser is not so generous.

CSS3 animation

Advantages:

1. In some cases, the browser can optimize the animation. Why do you say that in some cases, because it is Conditional:

• In a browser based on Chromium

• At the same time, CSS animation does not trigger layout or paint, but CSS animation or JS animation triggers paint or layout At this time, the main thread is required to recalculate the Layer tree. At this time, CSS animation or JS animation will block subsequent operations.

  In the main thread, a Layer tree (LayerTreeHost) is maintained and TiledLayer is managed. In the compositor thread, the same LayerTreeHostImpl is maintained and LayerImpl is managed. The contents of these two trees are copy relationship. Therefore, they can not interfere with each other. When Javascript operates LayerTreeHost in the main thread, the compositor thread can use LayerTreeHostImpl for rendering. When Javascript is busy and the main thread is stuck, the process of compositing to the screen is also smooth.
  In order to prevent suspended animation, mouse and keyboard messages will be distributed to the compositor thread first, and then to the main thread. In this way, when the main thread is busy, the compositor thread can still respond to some messages. For example, when the mouse is scrolling and the main thread is busy, the compositor thread will also process the scrolling messages and scroll the page parts that have been submitted (the unsubmitted parts will be whitewash).

2. Some effects can be forced to use hardware acceleration (to improve animation performance through the GPU)

Disadvantages

• The control of the running process is weak. CSS3 animation can only control the pause and continuation of animation in certain scenarios, and callback functions cannot be added at specific locations.

• The code is lengthy. If you want to use CSS to implement slightly more complex animations, the CSS code will become very cumbersome in the end.

The premise that css animation is smoother than js animation

• js is performing some complex tasks
• css animation is less or does not trigger pain and layout, that is, redrawing and rearranging, such as css animation generated by changing the following properties
  • backface-visibility
  • opacity
  • perspective (setting element view)
  • perspective-origin
  • transfrom
• Some attributes can enable 3D acceleration and GPU hardware acceleration, such as when using transform's translateZ for 3D transformation
• In browsers based on Chromium, this seems to be optimized by the kernel. When the css animation knowledge changes transfrom and opacity, the entire CSS animation can be completed in the compositor thread (while the JS animation will be executed in the main thread), so that css Animation rendering does not affect the main thread.

Summary

Returning to daily development, when there is a need for animation, the first consideration must be whether it can be realized as much as possible. If both CSS animation and JS animation can be realized, we will have to weigh the issue of which performance is better based on the summary above. In short, CSS animation is not necessarily better than JS animation. It depends on the specific needs and business scenarios.

Learning video sharing: css video tutorial, javascript learning tutorial

The above is the detailed content of What is the difference between css3 animation and js animation. For more information, please follow other related articles on the PHP Chinese website!