How does a display display image work?

Each monitor has fixed refresh rate, usually is 60 hz, which is updated 60 pictures per second, the updated images from the video card in a place called buffer before, display the task is very simple, is fixed read 60 per second buffer before the images, and reads the image display to display.

What is the role of the graphics card?

The graphics card’s job is to synthesize new images and save them to the back buffer. Once the graphics card writes the composite image to the back buffer, the system swaps the back and front buffers so that the display can read the latest composite image. Typically, the graphics card is updated at the same rate as the monitor. But sometimes, in complex scenes, the graphics card will be slow to process an image, which can cause visual lag

Frame and frame rate?

Most devices update their screens at a rate of 60 times a second, which means that the rendering engine normally needs to update 60 images per second to the graphics card’s back buffer for smooth animation.

We call each image generated by the rendering line a frame and the number of frames updated by the rendering line per second as the frame rate. For example, if 60 frames are updated per second during scrolling, the frame rate is 60Hz (or 60FPS).

How does a rendering engine implement a frame of image?

There are three ways to achieve a frame image: rearrangement, redrawing and composition

These three render paths are different, and generally the longer the render path, the more time it takes to generate the image.

  • Rearrangement: It is necessary to re-evaluate the layout tree according to CSSOM and DOM, so that each stage of the rendering line is executed for an image, which is difficult to render efficiently if the layout is complex.
  • Redraw: Operations are slightly more efficient because there is no relayout phase, but you still need to recalculate the drawing information and trigger the sequence of operations that follow the drawing operation.
  • Composition: Compared with rearrangement and redrawing, the path of composition operation is very short. There is no need to trigger two stages of layout and drawing. If GPU is used, the efficiency of composition will be very high.

PS: In terms of efficiency, it is recommended that the synthesis method be preferred

How do browsers implement compositing?

Chrome’s composition technology can be summed up in three words: layering, chunking, and composition.

It is important to note that the composition is done on the composition thread, which means that the main thread is not affected when the composition is performed. This is why often the main thread gets stuck, but CSS animations still work.

What makes CSS animations more efficient than JavaScript animations?

When you do geometry, transparency, or scaling on an element, writing in JavaScript involves the entire rendering pipeline, making JavaScript very inefficient. You can use will-change to tell the rendering engine that you are going to do some special effects on the element, as shown below.

How to use will-change to optimize animation or special effects?

.box {
    will-change: transform, opacity;
}
Copy the code

This code is told in advance rendering engine box element geometry transform and transparency transform operation will be done, then rendering engine will be the element individually implementation frame, such as the transformation occurs, the rendering engine will directly by synthetic thread to processing transformation, the transformation is not involved in the main thread, thus greatly improve the rendering efficiency. This is why CSS animations are more efficient than JavaScript animations.

Disadvantages: The disadvantage of using will-change to tell the rendering engine ahead of time to prepare a separate layer for the element is that it also takes up a lot more memory, because starting with the layer tree, each subsequent stage has an additional layer structure, which requires extra memory, so will-change needs to be used properly.