Reasons for IOS off screen rendering

Time:2021-11-7

Normal rendering flow

  • In the rendering process of GPU, according toFrom far to nearThe images are displayed on the screen in order, and the results are stored inframe buffer
  • Video controller fromframe bufferAfter reading the data in and displaying it on the screen, the frame change data will be lost immediately
    Reasons for IOS off screen rendering

    Normal rendering flow

offscreen rendering

If we do special treatment for the view: fillet, shadow, etc. GPU needs to render and merge the images additionally, and thenEach layerThe processing results are stored in theOff screen bufferAnd then overlay and merge multiple layers intoframe buffer, finally displayed on the screen

Reasons for IOS off screen rendering

Off screen rendering process

Off screen buffer

  • Is a temporary buffer used to store data for subsequent operations
  • Off screen buffer will not only bring convenience, but also bring serious performance problems. Because it needs to open up an additional cache to store data, and it also needs to be transferred toframe bufferIt’s also time-consuming
  • The maximum off screen buffer is the size of the screen2.5x
  • Because the processing of some special effects can not be completed at one time, it needs to be usedOff screen bufferTo save the intermediate state transition, which is automatically triggered by the system, such asFillet, shadow, Gaussian blur, rasterization, etc
  • It can improve the rendering efficiency. If an effect is realized multiple times, it can be rendered in advance and saved to the off screen buffer to achieve the purpose of reuse. This situation needs to be triggered manually by the developer
Rasterization

When rasterization is turned on, we will render the layer as a bitmap and save it to the cache, so that it can be reused directly next time to improve efficiency

  • If layers cannot be reused, it is not necessary to turn on rasterization
  • If the layer is frequently modified, turning on rasterization will affect the efficiency
  • The content of off screen rendering cache is time limited. If it is not used within 100ms, it will be discarded
  • The off screen rendering cache space is limited, which is 2.5 times that of the screen. If it exceeds 2.5 times the screen pixel size, it will also be discarded
Fillet trigger off screen rendering timing
  • When only the backgroundColor and border are set, but there is no subview in the contents, no mattermaskToBounds / clipsToBoundsTrue or false, off screen rendering will not be triggered
  • When there is a child view in the contents, it is set at this timecornerRadius+maskToBounds / clipsToBounds, off screen rendering is triggered
  • UIImageViewOnly set inPictures and masktobonds / clipstobondsOff screen rendering is not triggered unless the background color is set again

As shown in the figure, calayer is composed of backgroundColor, contents, borderwidth & bordercolor

Reasons for IOS off screen rendering

image.png

Some instructions on fillet settings in Apple’s official documents:
The official document tells us that setting CornerRadius will only set fillets for backgroundColor and border in calayer, not for contents. If contents needs to set fillets, masktobonds / clipstobonds need to be set to true at the same time.

Reasons for IOS off screen rendering

Some instructions for fillet settings in official documents

Detect off screen rendering

Reasons for IOS off screen rendering

Detect off screen rendering