Front-end performance optimization: Use CSS animation whenever possible

Date: 2013-7-4 Source: gbin1.com

Website design requires a large number of beautiful features and configurable element animations, making some JavaScript libraries such as jquery and mootools widely used. Although the browser currently supports CSSTransformationAndKeyframeMany people still use JavaScript to create animations, but CSS animations are more efficient than JavaScript-driven animations. CSS animation requires less code. Many CSS animations are processed with GPUs, so the animation itself is smooth. Of course, you can use the following simple CSS to force your hardware to accelerate:

. Myanimation {Animation: someanimation 1 s; transform: translate3d (0, 0, 0);/* force hardware acceleration */}

Tansform: Transform (0, 0)Send calls to hardware acceleration without affecting other animations. When CSS animation is not supported (IE8 and earlier browsers), you can introduce JavaScript animation logic:

<! -- [If earlier than IE8 version]> <SCRIPT src = "http://code.jquery.com/jquery-1.9.1.min.js"> </SCRIPT> <SCRIPT src = "/JS/ie-animations.js"> </SCRIPT> <! [Endif] -->

In the above example, the ie-animations.js file must contain your custom jquery code, used to replace CSS animation to complete the animation effect when CSS animation is not supported in early IE. It perfectly optimizes the animation through CSS animation and supports global animation effects through JavaScript.

In the next article, we will introduce event delegation. For more information about CSS animation, see the CSS 3 Series tutorials in the excellent tutorials.

Related reading:

• Front-end performance optimization: documentfragments or innerhtml replaces Complex Element Injection
• Front-end performance optimization: Anti-shake of high-frequency execution events/methods
• Frontend performance optimization: static cache and non-essential content Optimization for Network Storage
• Frontend performance optimization: asynchronous loading and delayed loading of Dependencies
• Front-end performance optimization: Use array. Prototype. Join to replace string connections

Via geeks

Source: front-end performance optimization: Use CSS animation whenever possible