Case interpretation

In our daily development, we often use the layer.cornerRadius approach for rounded corners. Would that even bring an off-screen rendering? Today we’re going to look at it. Here are a few examples of different forms of layer.cornerRadius

/ / 1. The button is the background image UIButton * btn1 = [UIButton buttonWithType: UIButtonTypeCustom]; btn1.frame = CGRectMake(100, 30, 100, 100); btn1.layer.cornerRadius = 50; [self.view addSubview:btn1]; btn1.backgroundColor = [UIColor blueColor]; [btn1setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal]; btn1.clipsToBounds = YES; / / 2. The button does not exist the background image UIButton * btn2 = [UIButton buttonWithType: UIButtonTypeCustom]; btn2.frame = CGRectMake(100, 180, 100, 100); btn2.layer.cornerRadius = 50; btn2.backgroundColor = [UIColor blueColor]; [self.view addSubview:btn2]; btn2.clipsToBounds = YES; //3.UIImageView sets image + background color; UIImageView *img1 = [[UIImageView alloc]init]; img1.frame = CGRectMake(100, 320, 100, 100); img1.backgroundColor = [UIColor blueColor]; [self.view addSubview:img1]; img1.layer.cornerRadius = 50; img1.layer.masksToBounds = YES; img1.image = [UIImage imageNamed:@"btn.png"]; //4.UIImageView sets only the image, no background color; UIImageView *img2 = [[UIImageView alloc]init]; img2.frame = CGRectMake(100, 480, 100, 100); [self.view addSubview:img2]; img2.layer.cornerRadius = 50; img2.layer.masksToBounds = YES; img2.image = [UIImage imageNamed:@"btn.png"];
Copy the code

The result is shown below

First, turn on the simulator’s off-screen rendering detection

The results showed

layer.cornerRadius

  • When the image size is larger than the UIImageView size, andclipsToBoundsSet the property totrueAt this point, the image will be cropped. It produces an off-screen rendering.
  • The background color is rendered with the background image. Personal understanding is that the background color and the background image are included, will produce different levels. This results in an off-screen rendering.

In order to improve rendering efficiency, APP opens two buffers offscreen Buffer and FrameBuffer, aiming to exchange space for time. Offscreen Buffer in advance can improve reuse purposes. In special effects, the screen needs to use extra offscreenBuffer to save intermediate states, so off-screen rendering has to be used, such as rounded corners and shadows. But off-screen rendering can also cause performance problems — it’s easy to drop frames. There are two main reasons for off-screen rendering:

1. Under the effect of VSync(vertical pulse) signal, the video controller will go to the frame buffer (current screen buffer) to read the rendered data every 16.67ms; However, some effects are thought to be unable to be directly displayed on the screen, requiring additional processing and precomposition elsewhere.

For example, the mixture of layer properties cannot be drawn directly on screen without pre-composition, so it needs to be rendered off-screen. Off-screen rendering does not mean software rendering, but it does mean that layers must be rendered in an off-screen context (whether CPU or GPU) before they can be displayed.

2. The rendered textures of some views need to be reused several times, but the on-screen rendering buffer is updated in real time. Therefore, it is necessary to open the off-screen rendering buffer to render the contents of the view into textures and cache them, and then call the on-screen buffer when needed to avoid the overhead of multiple rendering.

A classic example is rasterization. Rasterization is to render the content of the view into a texture and cache it. When the next call is made, the texture will be directly removed from the cache. However, when updating the content, off-screen rendering will be enabled, so the update cost is relatively high and can only be used for static content. Also, if the rasterized element 100ms is not used, it will be removed, so rasterization of uncommon elements will not optimize the display.

Note: Rasterized elements are limited to 2.5 times the total size of the screen.