What is off-screen rendering?

Normal rendering flow

  • Normal rendering is to throw data into the frame buffer and display it on the screen. This process is based on the principle of disposable, do not do any storage. This will improve performance. As shown in figure:

Off-screen rendering process

  • Off-screen rendering is when we merge and integrate the picture data for rounded corners or cutting operations. But normal rendering process doesn’t do any storage, so we need the off-screen buffer, first put the data into the off-screen buffer, processed results into the frame buffer. As the picture (the picture is not good, understand my meaning can. 🤣) :

Pros and cons of off-screen rendering

Disadvantages of off-screen rendering

  • Performance is affected: Since the off-screen buffer is extra space for storing data, transferring data to the frame buffer takes an extra step to save.
  • The off-screen buffer has space to go online: 2.5 times the number of pixels on the screen.

The necessity of off-screen rendering

So why do we still use off-screen rendering when it causes performance issues?

  • Handling some special effects: The need to use extra off-screen buffers to hold intermediate states, we had to use them. Most of this is triggered by the system. Rounded corners, shadows, etc
  • Efficiency advantage: if an effect can be realized several times, it can be rendered in advance to achieve the purpose of reuse.

Rounded corners trigger offscreen Rendering

To a wave of graphic description (due to painting technology is limited, steal a wave).

  • CALayer consists of three parts: backgroundColor, contents and border.
  • When people set rounded corners, there will be a wave of cuts. I think it’s a pattern. The real reason is that when you have a cornerRadius you only have a corner for backgroundColor and border, but not for contents. To set contents rounded corners, use maskToBounds, clipsToBounds. This triggers an off-screen render.

Note: not all rounded corners will trigger off-screen rendering, backgroundColor, contents, border should be rounded at the same time.

Several common conditions that trigger off-screen rendering.

  • Layer with mask (layer.mask)
  • Layer (layer.maskstobounds/view.clipstobounds)
  • Set up a group to YES, transparency and transparency of 1 layer (layer. AllowsGroupOpacity/layer. Opacity)
  • Added shadow layer (layer.shadow*)
  • ShouldRasterize (layer. ShouldRasterize)
  • Layer with Text drawn (UILabel, CATextLayer, Core Text, etc.)