How do I trigger off-screen rendering

1. The rounded corners

Button. clipsToBounds = YES; Button. The layer. The cornerRadius = 4; Normally setting rounded corners will trigger off-screen rendering, but setting rounded corners does not trigger off-screen rendering 100% of the time. For example, for a button, I just set the background color and font and turn rounded corners on. Will it trigger off-screen rendering in this case? With that in mind, let’s explore the code:

/ / 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 setImage:[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 the 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 only sets 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

Here’s what it looks like when you run it in the simulator

Then we turn on Color Offscree-renderd in debug

When we open it, we will see that some of the images in the simulator are marked yellow, so those marked yellow will render off screen, and 1 and 3 will render off screen. With rounded corners turned on in all four pieces of code, why are only 1 and 3 rendered off-screen?

In iOS, a CALayer consists of a backgroundColor, contents, borderwidth, and Bordercolor.

If contents are not empty, then contents will be rounded only if you set masksToBounds to Yes. In this case, the rounded action can be seen as a two-part render that needs to be displayed on the screen at the same time, which will trigger an off-screen render. So code 1, 3 triggers off screen render rounded corners how can we avoid off screen render

Use pictures with rounded corners;

Use CoreGraphics to pre-crop rounded corners;

Use an opaque layer with four rounded corners

2. The shadow (shadow)

The reason for this is that, although the layer itself is a rectangular area, the shadows are applied to the “non-transparent area” by default and need to be displayed below all the layer content, so must be rendered first according to the artist’s algorithm. However, the contradiction is that the body of the shadow (the layer and its sub-layer) has not yet been combined together, so how can it be possible to draw the shape in the first step that can only be known after the last step is completed? In this way, we can only apply for another piece of memory, draw all the ontology contents first, and then add shadows to the frame buffer according to the shape of the rendering results, and finally draw the contents.

How do shadows avoid off-screen rendering

CoreAnimation’s shadowPath property records the geometry of the shadow, so that the shadow can be rendered independently first, without relying on the layer ontology, so that off-screen rendering is no longer required.

 view.layer.shadowPath=[UIBezierPath pathWithCGRect:view.bounds].CGPath;

Copy the code

3. Group Opacit

GroupOpacity indicates the allowsGroupOpacity property of a CALayer, and the alpha property of UIView is the same as the opacity property of a CALayer. After GroupOpacity is enabled, the opacity upper limit of the child layer is the opacity of its parent layer.

This feature has been enabled globally by default since iOS 7, so that the child view has the same transparency as its container view.

The conditions for GroupOpacity to enable off-screen rendering are: Layer.Opacity! = 1.0 and has a sublayer or background.

This trigger does not require subLayer. Opacity! = 1.0, very easy to satisfy. However, setting the alpha property of cell or cell.contentView to less than 1 in a view like TableView does not detect the yellow feature of off-screen rendering, nor does it make a significant difference in performance. After fumbling found: only set tableView alpha less than 1 will trigger off-screen rendering, no significant impact on performance; Setting the cell’s alpha property has no effect on overall transparency, only setting the cell.contentView.

GroupOpacity triggers an off-screen rendering that can be easily observed in a normal UIViewController view, and you can only guess that the TableView changes these behaviors.

4. The mask (Masking)

A mask is applied on top of a combination of layer and all its sub-layers and may have opacity, which, like group opacity, has to be done in an off-screen render.

5. ShouldRasterize

Rasterization is to manually start off-screen rendering. ShouldRasterize = false, the off-screen render yellow feature is limited to the part that triggers the off-screen render effect automatically; ShouldRasterize = true both this section and the entire layer that shouldRasterize = true have a yellow feature.

Suggestions on the use of raster

If the layer does not need to be reused, it does not need to be opened.

If the layer is not static and needs to be modified frequently, such as during animation, then turning on raster will affect performance

The off-screen render cache has a time limit. When it exceeds 100ms, the content will be discarded if it is not used. The off-screen render cache has a space limit and is invalid if it exceeds 2.5 times the screen pixels and cannot be used

Pros and cons of off-screen rendering

Advantages:

Improve rendering efficiency. For example, an effect that appears on screen multiple times can be reused using off-screen rendering mechanisms.

disadvantages

Increased loss of performance.

It’s easy to drop frames.

Off-screen rendering is originally an optimized design, but at the same time, performance is sacrificed. Whether to enable off-screen rendering needs to be determined by specific requirements.