CSS animation performance optimization

1. Use css, jquery, canvas to create animations

1. Canvas

Advantages: good performance, powerful, supports most browsers (except IE6, IE7, IE8), the drawn graphics can be directly saved as .png or .jpg graphics;

Disadvantages: Dependent on HTML, graphics can only be drawn through scripts, and there is no API to implement animation (relying on events) and timer updates); since text displayed programmatically on canvas is actually a bitmap, search crawlers will ignore the text entirely. Text content is also not recognized by screen readers.

2, css3

Advantages: simple and separated from content, css animation does not trigger layout and paint; (modification of these properties will not trigger layout and paint: backface-visibility, opacity, perspective , perspective-origin, transform);

Disadvantages: There are browser compatibility issues, Android phones may experience lag, and are restricted by the typesetting engine, which is closely related to the DOM structure of the entire page.

3. JQuery

Advantages: No compatibility issues

Disadvantages: repaint and recomposite are required for each frame (very time-consuming);

Summary: In terms of mobile animation effects, using css3 animation is much more efficient than jquery animation. The performance is especially obvious on Android phones! Therefore, mobile animations prioritize CSS3 animations, and jquery can only be used to simply handle application logic. CSS3 animation is a general solution for adding special effects to content layout, but on mobile browsers with poor performance, it is likely to be limited by the layout performance and cannot achieve the desired effect. For specific scenarios that require performance, such as games, canvas will be greatly improved.

(Recommended tutorial: CSS Getting Started Tutorial)

2. CSS3 freezes on the mobile terminal

The animation produced by css3 runs on ios 66, but sometimes lags occur on Android. You might as well look for problems from the following points.

a. Whether it causes layout

If so, make the animation elements absolute or fixed as much as possible to avoid affecting the document tree and reduce reflow.

b. Whether it is enabled Hardware acceleration

"Using CSS3 animation" and "turning on hardware acceleration" are two different things, although the former may cause the latter.
There is a magical panacea for turning on hardware acceleration in webkit: opacity: 1; or -webkit-backface-visibility: hidden;.

c. Whether there are high-cost attributes (css shadow, gradients, background-attachment: fixed, etc.)

If so, pictures are also an option. This can be regarded as an optimization that trades space for time.

d. Area of ​​repaint

If so, we have to reduce the animation area. The optimization of this step is limited;

e. Try to use transform to generate animation and avoid using height, width, margin, padding, etc.; such as the following examples 1 and 2.

PS: Using transform, the browser only needs to generate the bitmap of this element once and submit it to the GPU for processing when the animation starts. After that, the browser does not need to do any layout, drawing, and submission of bitmap operations. As a result, the browser can take full advantage of the GPU's capabilities to quickly draw bitmaps in different positions, perform rotation or scaling. In short, the transform animation is controlled by the GPU, supports hardware acceleration, and does not require software rendering

3. There is flickering during the animation process (usually occurs at the beginning of the animation)

Solution:

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

In browsers with webkit kernel, another effective method is:

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

Recommended related video tutorials: css video tutorial

The above is the detailed content of CSS animation performance optimization. For more information, please follow other related articles on the PHP Chinese website!