Off-screen rendering is a common question in iOS development interviews, so what exactly is off-screen rendering? When will an off-screen render be triggered? What are the benefits of off-screen rendering, and what are the problems? Let’s use some examples to discuss it.

1. What is off-screen rendering

As we know, in iOS, the display of non-off-screen rendering layers is processed by CPU, rendered by GPU, and then the rendering results are stored in the frame cache before being loaded and displayed on the screen. The general process is as follows:

2. When will off-rendering be triggered

The above explains what an off-screen rendering is, but in development, what kind of scene triggers an off-screen rendering? Some people say that drawing rounded corners will trigger off-screen rendering, but this statement is not accurate. In fact, drawing rounded corners does not necessarily trigger off-screen rendering. We verify this problem with the code

2.1 Rounded corners do not trigger off-screen rendering

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 200, 200)]; view.backgroundColor = [UIColor magentaColor]; view.layer.borderColor = [UIColor cyanColor].CGColor; View. The layer. The cornerRadius = 100.0; view.layer.borderWidth = 5; // Set background and border clipping view.clipsToBounds = YES; // Set border clipping with contents view.layer.masksToBounds = YES; view.center = CGPointMake(self.view.center.x,view.center.y); [self.view addSubview:view]; UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 300, 200, 200)]; imageView.image = [UIImage imageNamed:@"fff.jpg"]; imageView.layer.cornerRadius = 100; // Set background and border clipping imageView.clipsToBounds = YES; / / Settings include the border around the contents cutting imageView. Layer. MasksToBounds = YES; imageView.center = CGPointMake(self.view.center.x,imageView.center.y); [self.view addSubview:imageView];Copy the code

This is because the view and imageView in our code are effects that can be completed by one layer, that is, the GPU only needs one time to complete the rendering. There is no so-called intermediate effect and the final display effect is directly obtained, so no off-screen rendering is triggered.

2.2 Rounded corners trigger off-screen rendering

Let’s look at the following broken code

UIView *view = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 200, 200)]; view.backgroundColor = [UIColor magentaColor]; view.layer.borderColor = [UIColor cyanColor].CGColor; View. The layer. The cornerRadius = 100.0; view.layer.borderWidth = 5; // Add contents view.layer.contents = (__bridge id)[UIImage imageNamed:@"fff.jpg"].CGImage; // Set background and border clipping view.clipsToBounds = YES; // Set border clipping with contents view.layer.masksToBounds = YES; view.center = CGPointMake(self.view.center.x,view.center.y); [self.view addSubview:view]; UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(50, 300, 200, 200)]; / / more than a added background color imageView. BackgroundColor = [UIColor cyanColor]; imageView.image = [UIImage imageNamed:@"fff.jpg"]; imageView.layer.cornerRadius = 100; // Set background and border clipping imageView.clipsToBounds = YES; / / Settings include the border around the contents cutting imageView. Layer. MasksToBounds = YES; imageView.center = CGPointMake(self.view.center.x,imageView.center.y); [self.view addSubview:imageView];Copy the code

This time, the view and imageView both trigger an off-screen render, as shown below

2.3 Common conditions that trigger off-screen rendering

In the example above, we know what triggers an off-screen rendering, and in iOS development, there are other situations that trigger an off-screen rendering

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

3. Advantages and disadvantages of off-screen rendering

3.1 Disadvantages of off-screen rendering

As we know, compared with normal rendering, off-screen rendering requires extra space, namely off-screen buffer, to store and process our intermediate rendering effects, which causes performance loss, mainly in the following aspects. 1. Off-screen rendering requires additional storage space, the maximum size of storage space is 2.5 times the screen pixel size, once exceeded, off-screen rendering cannot be used; 2. Easy to drop frames: Once the final frame cache is saved due to off-screen rendering, and it has exceeded 16.67ms, the frame will drop;

3.2 Advantages of off-screen rendering

Although off-screen rendering can cause loss of performance, when encountered in the development of complex design effect, we are to the UI experience, still need to use to render off-screen, complex, multiple rendering is needed to get the display effect, we can use an off-screen buffer, will need to display the layer renders the spare in advance; Reusable off-screen rendering can also be reused, so that THE CPU/GPU does not have to do some repeated calculations, but pay attention to the return time, the cache of off-screen rendering has a time limit, if the cache content is not reused within 100ms, it will be discarded, so it cannot be reused;