Say goodbye to iOS and common off-screen rendering!

The optimization of mobile applications mainly depends on FPS (page smoothness) performance, memory usage, etc. Off-screen rendering is also a common problem. This article focuses on the common factors that lead to off-screen rendering and their solutions.

So why does off-screen rendering cause performance issues?

In OpenGL, there are two ways of GPU screen rendering: On-Screen Rendering and Off-Screen Rendering. On-Screen rendering does not require the creation of a new cache or the opening of a new context, and has better performance than off-screen rendering. However, due to the limitations of current screen rendering (only its own context, limited screen cache, etc.), off-screen rendering is used when current screen rendering cannot solve some problems. The entire off-screen rendering process requires switching the context environment, first switching from the current screen to the off-screen, and then switching the context environment back after the end. This is why performance is consumed.

[[214033]]

The factors that trigger off-screen rendering include cornerRadius (setting rounded corners), shadows, masks, edge antialiasing, group opacity, shouldRasterize, etc. As for the tool Instruments' Core Animation for detecting off-screen rendering, I won't go into details. This article mainly introduces the solution for setting rounded corners and shadows.

Set rounded corners

Conventional practice:

 //You only need to set two properties of the layer
 //Set the rounded corners
   imageView.layer.cornerRadius = imageView.frame. size .width / 2;
 //Cut off the excess
   imageView.layer.masksToBounds = YES;

Here are two solutions to avoid off-screen rendering

1. Add a sublayer to the top layer of the view to cover the view and its subviews. Set the layer's image to just cover the required rounded corners, and the image color is exactly the background color of the parent view of the view to achieve the desired effect.

github address

 /**
 Set a four-corner rounded corner 
 
 @param radius fillet radius
 @param color rounded background color
 */
 - (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color; 
 
 /**
 Set a normal rounded corner 
 
 @param radius fillet radius
 @param color rounded background color
 @param corners rounded corner position
 */
 - (void)xw_roundedCornerWithRadius:(CGFloat)radius cornerColor:(UIColor *)color corners:(UIRectCorner)corners; 
 
 /**
 Set a rounded corner with a border 
 
 @param cornerRadii corner radius cornerRadii
 @param color rounded background color
 @param corners rounded corner position
 @param borderColor border color
 @param borderWidth border line width
 */
 - (void)xw_roundedCornerWithCornerRadii:(CGSize)cornerRadii cornerColor:(UIColor *)color corners:(UIRectCorner)corners borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth;  

After downloading this category, you can directly drag it into the project to use it. It is very convenient to call. However, when using it, you will find that these three APIs all need to pass a parameter cornerColor (the background color of the parent view), which also causes the limitation of this function. That is, if the color of the parent view is not a solid color, this method is not applicable at this time. Similarly, if the color of the parent view changes, the implementation code is not so elegant, as shown in the figure below, which is a bit embarrassing. Here comes the second solution.

Corner color does not match background color

2. By modifying layer.mask, first create a vector-based path through Bezier curves and pass it to CAShapeLayer for rendering. The path is closed, and then the drawn Shape is assigned to layer.mask. The layer outside the Mask range will not be displayed to achieve a rounded corner effect. The code implementation is very simple, as follows:

 UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(130, 330, 100, 100)];
    [btn setBackgroundColor:[UIColor colorWithRed:(226.0 / 255.0) green:(113.0 / 255.0) blue:(19.0 / 255.0) alpha:1]];
    [backgroundImageView addSubview:btn];
 //Draw the curve path
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:btn.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii: btn.bounds.size ];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
 //Set the size
    maskLayer.frame = btn.bounds;
 //Set the graphics appearance
    maskLayer.path = maskPath.CGPath;
    btn.layer.mask = maskLayer;

Effect picture:

Personally, I think the second solution is simpler and has stronger functional scalability.

Setting up shadows

Conventional practice:

 //Shadow color
 self.imageView.layer.shadowColor= [UIColorblackColor].CGColor;
 // Transparency of the shadow
 self.imageView.layer.shadowOpacity=0.8f;
 //Shadow rounded corners
 self.imageView.layer.shadowRadius=4;
 //Shadow offset
 self.imageView.layer.shadowOffset=CGSizeMake(0,0);  

Optimization plan:

Avoid modifying shadowOffset directly. Instead, call setShadowPath to provide a CGPath to the view's layer and provide the shape of the rendered View to Core Animation, which will reduce off-screen rendering calculations.

 [self.imageView.layer setShadowPath:[[UIBezierPath
    bezierPathWithRect:myView.bounds] CGPath]];

Supplement: When the shape of the view using the shadow changes, the shadowPath does not change with the bounds property of CALayer, so after the bounds of the layer change, you need to manually update the shadowPath to make it adapt to the new bounds.