Try to animate using translate instead of changing top/left (translate)

Objective

This article is translated from why moving Elements with Translate () is Better Than pos:abs Top/left, this article has been modified to add some author's own understanding, the wrong place also please spectators pointed out.

Translation text

There are two ways to move an element in a document,

1, easing using the translate family function provided by transform

2, absolute positioning of elements, change the Top/left value within the set time

But what is the difference between these two ways?

To long story short, the author has tested the animated FPS on Chrome and found a significant difference between the two: performance.

The picture at the top left is the frame rate that is animated by changing the element top/left, while the upper right is the frame rate that invokes the translate function. We can see clearly that each frame on the left is executed for a relatively long time, and in each frame, the CPU needs to calculate the other styles of the element, especially the styles of box shadows, gradients, fillets, and so on, which need to be applied to the element in a complex calculation. From this point of view, if the older mobile devices are relatively complex animation, then the effect is certainly not ideal.

By invoking translate, hardware acceleration is initiated, which renders the element at the GPU layer. In this way, the CPU will be relatively free to perform other calculations, the GPU is relatively quick to calculate the style, and guarantee a large frame rate. We can enable GPU computing with the transform of 2d and 3d.

Summarize

Finally, we summarize some of the main points of animating elements:

1, try to animate with keyframes and transform so that the browser allocates the length of each frame itself and optimizes

2, if you do not want to use JS to animate, using Requestanimateframe

3, use 2d transform instead of changing the value of Top/left, this will have shorter repaint time and more smooth animation effect

4, the mobile side of the animation may be worse than the PC side, so be sure to pay attention to performance optimization, minimizing the DOM complexity of animation elements, to perform the DOM operation asynchronously after the end of the animation

Try to animate using translate instead of changing top/left (translate)