Effect of css attribute selection on animation performance-dehua. Chen

The Influence of css attribute selection on animation performance-dehua. Chen is now playing a higher proportion on mobile phones, and various cool pages are emerging. These special effects cannot be separated from css animation. When it comes to css animation, the mainstream situations are nothing more than these two categories: displacement and deformation. In the process of writing an animation special effect, how can we improve its performance? Of course, first of all, we need to understand the basic concepts, such as the working principle of browser rendering. I have read a few articles written by Daniel, I will not elaborate on it here. If you are interested, you can take a look. The purpose of this article is simply and roughly speaking, in fact, what css attributes should we use to draw an animation, which can effectively improve the performance of the browser in the rendering and rendering process.

Left and transform are used to translate the 500px shift to the right in 2 seconds. The Code is as follows:

Then, the following result is obtained in chrome. The first is left, and the second is transform:

Transform

Obviously, in the frame mode, we can see that left is lower than the number of transform frames, and the time consumed in rendering and drawing is far greater than transform. I believe you have come to a conclusion.
We use chrome's show paint rectangles to observe the differences between the rendering and the drawn areas during the animation process. The first is left, and the second is transform:

Transform

We can see that during the animation process written with left, the browser has been rendering. In contrast, when using transform, the animation is drawn only at the beginning and end. Therefore, for the animation performance, transform should be better. As for the reason, we need to introduce a concept that triggers the re-layout:

When we change some attributes, layout-related attributes will trigger re-layout, resulting in longer rendering and rendering time. Therefore, when writing an animation, we should avoid these attributes: width, height, margin, padding, border, display, top, right, bottom, left, position, float, overflow.
Attributes that do not start to re-layout include: transform (including translate, rotate, scale), color, and background.

Therefore, when writing css animations, we should give priority to the attributes that do not trigger the re-layout, so that the animation effects we present can be smoother.

Reprinted please indicate from: Ctrip Design Committee