There’s a lot of lag when using CSS animations on mobile, and there’s a lot of tutorials online that say turn on gpu-accelerated transform: translate3d(0,0,0); Resolvable, but why does turning on GPU acceleration make animation smooth?

Let’s look inside the browser

JS is single-threaded, but browsers can open multiple threads. Rendering a web page requires two important threads:

  • Main Thread Main Thread
  • Compositor Thread Render Thread

The main thread works:

  1. Run JS
  2. Computes CSS styles for HTML elements
  3. The layout page
  4. Draws elements to one or more bitmaps
  5. These bitmaps are handed over to the Compositor Thread for processing

Drawing thread work:

  1. Draw bitmaps to the screen using the GPU
  2. Notifies the main thread to update the bitmap of the visible or soon-to-be-visible portion of the page
  3. Figure out which parts of the page are visible
  4. Figure out which parts of the page will be visible as you scroll
  5. Move the elements into view as you scroll the page

We know that if executing JS for a long time blocks the main thread, the page will get all kinds of stuttering.

The drawing thread will try its best to respond to the user’s interaction. When the page changes, the drawing thread will constantly redraw the page at an interval of 60 frames per second (because 60 frames per second is the most suitable interaction for human eyes, it will obviously feel stuck if it is less than 60).

Gpus are fast in the following ways:

  • Draw a bitmap to the screen
  • Can draw the same bitmap over and over again
  • Shift, rotate, scale the same bitmap (animation)

But it’s a little slow to load bitmaps into GPU memory

So here’s the problem with the two pictures

PS: The operation in the orange box takes time, and the operation in the green box takes time

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}
Copy the code

An animation from height: 100px to height: 200px performs various operations according to the following flow chart

With so many orange boxes in the picture, the browser will do a lot of computation and the animation will stall.

Because with each frame change the browser is laying out, drawing, and handing the new bitmap to the GPU memory (which happens to be the weakness of the GPU we mentioned above).

Changing only the height of an element but probably changing the size of its child elements synchronously, the browser recalculates the layout, and the main thread regenerates the bitmap of that element.

Animation using the Transform property

Div {transform: scale (0.5); transition: transform 1s linear; } div:hover {transform: scale(1.0); }Copy the code

The flow chart is as follows

Obviously, with so few orange boxes, the animation must flow smoothly.

Because the transform property doesn’t change the layout of itself or the elements around it, it affects the elements as a whole.

Therefore, the browser only needs to generate a bitmap of the element once, and then hand it over to the GPU to handle the displacement, rotation, scaling, and other operations it does best when the animation starts. This frees the browser from having to do all the layout, drawing, and so on.

Perform comparison in Chrome

Under the above demo code executing in your browser to see effect, demo address: ccforward. Making. IO/demos/CSS/a…

transition: height 1s linear

The transform: scale (1.0)

Again, scale animation

Reference information: blogs.adobe.com/webplatform…