A, JS animation (setInterval setTimeOut requestAnimationFrame)
Advantages :
1) process control capability. It can precisely control the animation project, suspend, cancel, start, termination can be.
2) animation and more cool. Some effects are not possible with CSS animations
3) high compatibility
Disadvantages :
1) Because JS animation effects are achieved through continuous operation of DOM and CSS properties, which require constant rearrangement (reflow) and redraw (repaint), consuming browser's memory. (PC side with a browser
May allocate a relatively large memory, animation rearrangement (reflow) and redraw (the repaint) is negligible, but the effect is very obvious in the mobile terminal)
2) JS animation execution in the main thread, because the main thread, there are other scripts such as JavaScript needs to be performed, the main thread interference may cause frame loss problems.
3) the more complex CSS animations
4) As the JS animated asynchronous processing lead time animation begins execution can not accurately control
Two, CSS animation (transition transform animation)
Advantages :
1) can be optimized browser
The reason : The browser uses a similar mechanism requestAnimationFrame than compared to the advantages of setTimeout, setInterval is animated
* All DOM operations would a requestAnimationFrame together, or in a redraw complete reflux. And the same with the browser refresh rate
* Hidden or invisible elements requestAnimationFrame will not be redrawn or reflux, it will use less CPU GPU and memory usage
Optimized prerequisites :
* Chromium browser on the basis of
* CSS animation does not trigger layout or paint (trigger layout and paint in JS and CSS animation, it is necessary to recalculate Layer tree in the main thread, then JS CSS animations will block subsequent operation)
Modify the following attributes can be done only trigger composite, does not trigger layout and paint
- backface-visibility
- opacity
- perspective
- perspective-origin
- transfrom
2) some of the properties is possible to start acceleration and 3D acceleration hardware GPU (to improve animation performance by GPU), for example, be the 3D transformation translateZ transform
3) code is simple, easy tuning.
4) For the poor performance of the low frame rate version of the browser, CSS3 can do naturally downgrade, but you need to write extra code JS
Disadvantages :
1) animation project can not control, can only suspend canceled in certain situations, you can not add a callback function
2) compatibility is not good
Third, the performance issues
1, CSS 2D animation efficient than js matrix using matrix animation margin and left, top analog (CSS3 means of 2D animation is a 2D Transform matrix changes, such as scaling \ \y modification \x shaft axis (js modification of course, do not animation))
For example, using the transform CSS3 animations do translateXY than js in the position left, position right fast nearly 700mm! But also more fluid
2, other conventional efficiency CSS3 animation properties were lower than the simulated animation js (conventional animation property here means: height, width, opacity, border-width, color ... ..)