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

This article is about the differences between css3 animation and js animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Differences: 1, the control ability of js animation is stronger than css3 animation; 2, the effect of js animation is richer than css3 animation; 3, js animation has no compatibility problems in most cases, while css3 animation has compatibility problems; 4, the complexity of js animation is higher than that of css3 animation.

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

Advantages of JS animation:

Js animation control ability is strong, can be in the animation Bofan process of fine control of animation, start, pause, termination, cancellation can be achieved.

Animation effects are richer than css3 animation, such as curve motion, impact flicker, parallax scrolling effect, which can only be completed by js animation.

In most cases, js animation has no compatibility issues, while css3 animation has compatibility issues.

Shortcoming

Js animation is more complex than css3.

Js executes in the main thread of the animation browser, and the main thread also has other javaScript scripts, such as style calculation, layout, drawing tasks, etc., which may block and lose frames.

Js animation often needs to frequently manipulate the css attribute of DOM to achieve visual animation effects. At this time, the browser has to constantly redraw and rearrange, which consumes a lot of performance, especially on the mobile side where the memory allocated to the browser is not so abundant.

Advantages of CSS3 animation:

1. In some cases, browsers can optimize animation. Why do you say that in some cases, because there are conditions:

In browsers based on Chromium

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

In the main thread, a Layer tree (LayerTreeHost) is maintained, the TiledLayer is managed, and in compositor thread, the same LayerTreeHostImpl is maintained and the LayerImpl is managed. The content of the two trees is a copy relationship. So it doesn't interfere with each other, and when Javascript operates LayerTreeHost in main thread, compositor thread can render with LayerTreeHostImpl. The process of compositing to the screen is also smooth when the Javascript is busy and the main thread gets stuck.

To prevent fake death, mouse and keyboard messages are first distributed to compositor thread and then to main thread. In this way, when main thread is busy, compositor thread can still respond to some messages. For example, when the mouse scrolls, joining main thread is busy, and compositor thread will also process scrolling messages, scrolling parts of the page that have been submitted (uncommitted parts will be blacked out).

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

Shortcoming

The control of the running process is weak, and css3 animation can only control the pause and continuation of animation in some scenes, and cannot add callback functions in specific locations.

The code is lengthy. If you want to use CSS to implement a slightly more complex animation, the CSS code will eventually become very cumbersome.

The premise that css animation is smoother than js animation

Js is performing some complex tasks.

Css animation has little or no trigger for pain and layout, that is, redrawing and rearrangement, such as css animation generated by changing the following properties

Backface-visibility

Opacity

Perspective (set element view)

Perspective-origin

Transfrom

Some properties enable 3D acceleration and GPU hardware acceleration, such as when using transform's translateZ for 3D transformation

In Chromium-based browsers, this seems to be optimized by the kernel. When css animation knowledge changes transfrom and opacity, the entire CSS animation is completed in compositor thread (while JS animation is executed in main thread), so that css animation rendering does not affect the main thread.

Thank you for reading! This is the end of this article on "what are the differences between css3 animation and js animation". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.