CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)

1. Use CSS, jQuery, and 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: Depends on HTML, can only draw graphics through scripts, no API to implement animation (relies on events and timer updates); since the text displayed programmatically on the canvas is actually a bitmap, the search crawler will completely ignore the text. The text content is also not readable by screen readers.

2.css3

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

Disadvantages: There are browser compatibility issues, Android phones may freeze, it is limited by the typesetting engine, and it is closely related to the DOM structure of the entire page.

3. JQuery

Advantages: No compatibility issues

Disadvantages: Every frame needs to be repainted and recomposited (very time-consuming);

Summary: In terms of mobile animation effects, using CSS3 animation is much more efficient than jQuery animation. This is especially true on Android phones! Therefore, mobile animations are prioritized over CSS3 animations, and jQuery can only be used to simply process application logic. CSS3 animation is a universal solution for adding special effects to content layout, but it may be limited by layout performance on mobile browsers with poor performance and fail to achieve the desired effect. In specific scenarios that require high performance, such as games, using canvas will greatly improve performance.

2. CSS3 has a freeze problem on mobile devices

The animation made with CSS3 runs 66% on iOS, but sometimes there will be lag on Android. You may want to look for the problem from the following points.

a. Whether it causes layout
If so, make the animation element absolute or fixed as much as possible to avoid affecting the document tree and reduce reflow.

b. Whether to enable hardware acceleration
"Using CSS3 animation" and "enabling hardware acceleration" are two different things, although the former may lead to the latter.
There is a magic panacea in webkit to enable hardware acceleration: opacity: 1; or -webkit-backface-visibility: hidden;.

c. Are there any high-cost attributes (css shadow, gradients, background-attachment: fixed, etc.)
If available, pictures are also an option. This can be regarded as an optimization of exchanging space for time.

d. If the repaint area is, you have to reduce the animation area. There is limited optimization at this step;

e. Try to use transform to generate animations, and avoid using height, width, margin, padding, etc.; see Examples 1 and 2 below.

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, or bitmap submission operations. Thus, the browser can take full advantage of the GPU to quickly draw the bitmap in different positions, perform rotation or scaling. In short, 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 webkit-based browsers, 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 */

}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.