Who has better performance than CSS3 in JS animation? -

Previously, I always thought that css3 was the most powerful, but recently I made HTML5 pages and found that the result was not very good. Velocity. js, which has recently been found on github, has completely overturned my understanding as a leader in DOM animation. Link: CSSvs. JSAnimation: WhichisFaster? Previously, I always thought that css3 was the most powerful, but recently I made HTML5 pages and found that the result was not very good.
Velocity. js, which has recently been found on github, has completely overturned my understanding as a leader in DOM animation.

Related links:
CSS vs. JS Animation: Which is Faster? Reply: I have made a little Web App, and I am stuck in the Android Webview. Let's talk about it.

1. on modern PC browsers, CSS3 Animation and Transition are easy to write and use, smooth and smooth, and the Animation process is 0 GC. Of course, if Javascript controls DOM animation well, do not reflow frequently, and the animation is also smooth.

2. on iOS Safari, CSS 3 and js animations are easy to smooth, As long as reflow is not required.

3. In iOS Webview, jit cannot be used, and js performance is severely degraded. If CSS3 can solve the problem, js is not used. In a certain version of iOS, the restriction is lifted and I don't know much about it.

4. earlier Android versions use very old Webkit without hardware acceleration. CSS3 does not support completely. 2d Canvas has bugs, and the performance is far from chrome. If the animation is complex and large, the DOM tree is complex and uses performance-consuming styles such as box-shadow, making it difficult to be smooth.

In this case, consider Chrome on Android or crosswalk.

5. After Android 4.4, the system comes with chromium, and the experience is comparable to that of iOS safari.

====

In addition, a GC statement is provided.

Have you heard of GC? If you do not need CSS3 Animation and Transition, you need to use requestAnimationFrame (). During the animation process, js is continuously called, consuming memory, and GC is triggered after a period of time. If the GC time exceeds the frame budget, the animation will get stuck.

If JavaScript animation is required, consider using the transform attribute without reflow, and add translateZ (0) to force the specified hardware acceleration. JS animation is also implemented by changing CSS.

In addition, from the design perspective, CSS itself is designed to express the style and JS control logic. Javascript animation is a curve used to save the nation before css3.

I personally think that simple animations are made with CSS, especially complicated to use JavaScript.

The trend above codepen is JavaScript-based, and all animations are implemented with CSS. With LESS and other pre-compiled languages, you can make complicated animations.

In terms of performance, short-term mobile browsers may not support CSS3 well, but it will certainly be better than JS in the long term. In fact, this ..... Look at the engine ....
CSS 3 on chrome is obviously smoother than js, and js animation on IE11 is as smooth as silk .... The key to animation performance lies not in js execution efficiency, but in the dom structure. Therefore, css native animations are not significantly different from js animations.
To optimize the animation performance, we need to reduce dom and use proper positioning methods. This comparison should be an example.
This is a comparison I saw when translating an article a few days ago: Building Great Mobile Menus (create a Mobile menu for your website)
By the way, my translation is just for my own summary and learning, which is much simpler .. It is recommended to read the original article =-=
It does not involve complex computing. css is obviously fast, but involves complex computing. For example, if the point is uncertain, you still need to use js.

In fact, this comparison does not make much sense (it may be my water). In most cases, in the project,-0-you should use js for calculation. Js + canvas (html5) + level> css3> JavaScript + dom, JavaScript animation is more controllable than CSS3 animation, and there is no compatibility problem in principle.
CSS = iOS
JS = Android

(Personal project experience in a quick escape with a speed of 20 mahbs:
When there is no RAF, css is more fluent.
After RAF is available, the two are equivalent.


The js method requires developers to be familiar with js to avoid introducing other problems. In fact, this difference is different in most cases ......