1. Principles of computer image rendering

The ideal situation is that at a certain frequency, people can see a smooth picture (generally 60fps). After a picture is scanned, the screen refreshes one frame. When 60 frames are updated every second, one frame is updated every 16.7ms. Otherwise, there will be a lag

The process of image display is: Scanning image – > frame buffer – > video controller commands to read frames cache location map information – > digital-to-analog (digital signals into analog signals) – > display monitor refresh by rows, so in order to prevent display screen buffer data points belong to two different frames, and the displacement of the two frames have certain We will see the phenomenon of tearing the image, as shown below

Tearing occurs when the CPU and GPU can’t keep up with the current frame rate (60fps)

Typically found on low-end devices, loading a high FPS video/game scene. This is not common on iOS devices. On very low end iOS devices, it is possible to tear when loading an APP interface with very high frequency of action and layer complexity that includes animation —-> Apple uses double cache + VSYNC signals

The root cause of the tear is that the CPU and GPU computing power can’t keep up with the current frame rate. The double cache + vSYNC only allows us to display the contents of the previous frame without feeling the tear, which leads to new frame drops

2. Vsync and double buffering –> resolve tearing –> drop frames that cause new problems

Regular Gpus have at least two frame buffers. What is displayed on the screen is called the screen buffer, and what is not displayed is called the off-screen buffer. After a buffer is rendered, the image is displayed on the screen by swapping the screen buffer with the off-screen buffer.

When the display is refreshed, the buffer is locked in order to prevent the data in the buffer from being divided into two different frames. Therefore, the exchange usually waits for the signal that the display is refreshed to complete, and the signal is exchanged between the two monitor flush-times. This signal is called vsync signal

Double buffer must wait for the buffer exchange before display, if not, the data from the previous frame is still displayed, so the frame rate cannot fully reach the maximum level allowed by the hardware -> introduce three buffer technology.

Three buffer technology: There is one screen buffer and two off-screen buffers. While waiting for vsync, the two off-screen buffers are alternately rendered back and forth, while vsync occurs, the screen buffer and the recently rendered off-screen buffer are swapped, taking full advantage of hardware performance

3. The frame drop

When the vertical signal is received, the CPU and CPU do not complete the processing of the picture data, can not get the buffer data, repeatedly render the same frame data (the data in the last cache) to the screen, called frame drop.

4. Reasons for lag and frame drop:

CPU/GPU rendering pipeline takes too long –> Frame drop

Use vSYNC signal + double cache to solve the tear problem at the cost of frame drop

It is possible to drop frames with triple buffering, but you can reduce the number of frames lost