Recently, when optimizing the page animation effect, I discussed the problem of page animation lag with my colleagues. Although I generally understood that the animation implemented by CSS would have better performance than JS, and the lag would be less, I did not explore the principle of such problem. In the optimization process, we found that even if we use CSS animation, we still get stuck when we use height, width, margin, and padding as transition values, but CSS transform can be significantly improved. Similar questions will not be repeated, a similar question is attached to the reference. Here mainly talk about CSS exactly what animation effect frame number is high, good performance, what is the principle behind it.

How do CSS and JS animate a page?

Animations (using requestAnimationFrame()) Both CSS and JS can achieve web page animations, such as CSS Transitions /animations and javascripts -based animations (using requestAnimationFrame())

CSS transitions and animations

CSS Transitions provide an easy way to animate effects between existing styles and the final CSS state. Even though elements are still changing, the new transition will start with the current style rather than jump straight to the CSS state at the end.

CSS Animations allow developers to animate between a series of start and end values. They consist of two parts, a style that describes the CSS animation, and defining multiple keyframes and the attribute values of the elements in each keyframe

requestAnimationFrame

RequestAnimationFrame tells the browser that you want to execute an animation and asks the browser to call the specified callback to update the animation before the next redraw. This method takes as an argument a callback function that is executed before the browser’s next redraw. Like CSS Transitions and animations, requestAnimationFrame() is paused when the current Tab is pushed into the background.

Is CSS really faster than JS?

Conclusion first, no. In most cases, the animation performance of CSS and JS implementations is not much different, and some JS animation libraries even claim that their performance is better than CSS native animation. This happens because CSS Transitions /animations re-sample the styles of elements in the UI main process prior to the Repaint event. This is essentially the same form as the requestAnimationFrame() Callback. So if animations occur during the main process, there is no real difference in performance.

Why CSS animations are still a better choice?

The key to CSS animations is that we can take shaping elements out of the main process as long as the properties we want to set the animations to do not trigger the reflow/ Repaint operation. The browser only needs to generate a bitmap of the element once and submit it to the GPU for processing when the animation starts, which can dramatically improve processing performance, especially on mobile devices. After that, the browser doesn’t need to do anything to lay out, draw, or submit bitmaps. As a result, the browser can take full advantage of the GPU to quickly draw bitmaps in different locations and perform rotation or scaling.

Platform/GFX OffMainThreadCompositing wiki.mozilla.org/Platform/GF…

One of the most common uses is CSS Transform

In the table Triggers (CSSTRiggers.com/), we can see that the transform will not trigger the Layout and Paint layers

Of course, it can also be found that there are still differences between the WebKit kernel and the Gecko kernel in CSS Triggers, which does not rule out that the same implementation of IOS and Android devices will still have a difference in the performance of animation on the mobile side.

Reference:

  1. CSS and JavaScript Animation Performance developer.mozilla.org/en-US/docs/…
  2. CSS 3 animation caton performance optimization solution segmentfault.com/a/119000001…
  3. Using CSS transitions developer.mozilla.org/en-US/docs/…
  4. Using CSS animations developer.mozilla.org/en-US/docs/…