A performance optimization for MKMapView

The recent project is mainly LBS, which focuses on member positioning. Our UI design is as follows

At first glance, it looks good and beautiful. Different people will display different avatars. But when people gather together, problems arise.

When there are many people (such as shown in the picture above), the map can be felt to be stuck when sliding, and the unsmooth feeling is very torturous, so naturally we have to solve this problem (wait, don’t complain about why we don’t use map aggregation because this map has already been put on the ***, aggregation is not suitable for this problem discussion)

analyze

First, let's take a look at how I implemented this annotationView. Since this annotationView is a special shape (that is, it cannot be directly obtained by setting the rounded corners) and the pictures inside vary from user to user, the solution is to use layer.mask for masking. The code is as follows

 @implementationMMAnnotationView​
 - (instancetype)initWithAnnotation:(id)annotation reuseIdentifier:(NSString *)reuseIdentifier
 {
 self = [ super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];
 if ( self )
 {
 self.frame = CGRectMake( 0 , 0 , TRACK_ANNOTATION_SIZE.width, TRACK_ANNOTATION_SIZE.height);
 self.centerOffset = CGPointMake( 0 , -(TRACK_ANNOTATION_SIZE.height- 3 )/ 2 );
 self.canShowCallout = NO;
 self.avatarView = [[UIImageView alloc] initWithFrame:self.bounds];
 [self addSubview:self.avatarView];
 self.avatarView.contentMode = UIViewContentModeScaleAspectFill;
 CAShapeLayer *shapelayer = [CAShapeLayer layer];
 shapelayer.frame = self.bounds;
 shapelayer.path = self.framePath.CGPath;
 self.avatarView.layer.mask = shapelayer;
 self.layer.shadowPath = self.framePath.CGPath;
 self.layer.shadowRadius = 1 .0f;
 self.layer.shadowColor = [UIColor colorWithHex: 0x666666FF ].CGColor;
 self.layer.shadowOpacity = 1 .0f;
 self.layer.shadowOffset = CGSizeMake( 0 , 0 );
 self.layer.masksToBounds = NO;
 }
 return self;
 }
 //mask path  
 - (UIBezierPath *)framePath
 {
 if ( !_framePath )
 {
 CGFloat arrowWidth = 14 ;
 CGMutablePathRef path = CGPathCreateMutable();
 CGRect rectangle = CGRectInset(CGRectMake( 0 , 0 , CGRectGetWidth(self.bounds), CGRectGetWidth(self.bounds)), 3 , 3 );
 CGPoint p[ 3 ] = {
 {CGRectGetMidX(self.bounds)-arrowWidth/ 2 , CGRectGetWidth(self.bounds)- 6 },
 {CGRectGetMidX(self.bounds)+arrowWidth/ 2 , CGRectGetWidth(self.bounds)- 6 },
 {CGRectGetMidX(self.bounds), CGRectGetHeight(self.bounds)- 4 }
 };
 CGPathAddRoundedRect(path, NULL, rectangle, 5 , 5 );
 CGPathAddLines(path, NULL, p, 3 );
 CGPathCloseSubpath(path);
 _framePath = [UIBezierPath bezierPathWithCGPath:path];
 CGPathRelease(path);
 }
 return _framePath;
 } 
 
 I used code to generate the shape path and used it to generate the layer's mask and shadowPath 
 
 When using it, just use SDWebImage to set the avatar directly.
 1   
 
 [annotationView.avatarView sd_setImageWithURL:[NSURL URLWithString:avatarURL] placeholderImage:placeHolderImage];

Next, use the tool to analyze the problem. To analyze the performance, of course, select Instruments (I won't introduce the usage here). Open Core Animation and run the program. Slide the map to see the performance analysis as follows

It turns out that the average frame rate is less than 30 frames, which is far from our target of 60 frames.

Then use Debug Option to analyze it in depth

Because of MKMapView, we are mainly concerned with these options here

Color Blended Layers

Color Misaligned Images

Color Offscreen-Rendered Yellow

The results of opening these options separately are as follows

You can see

There is no problem with Color Blended Layers, but this is normal because there is no transparent area due to the use of masks

Color Misaligned Images is all correct except for the default avatar. This is because the image size on the server is inconsistent with the displayed size, which causes scaling. The default avatar is consistent, so there is no problem.

Color Offscreen-Rendered Yellow is all due to the use of masks, which leads to a lot of off-screen rendering, which is also the main reason for the performance degradation

solve

Now that the cause of the problem has been found, how can we solve it?

First of all, the mask is definitely not usable.

Secondly, we need to preprocess the downloaded images to their actual size

Then wouldn't it be ok to just combine the downloaded pictures into the final result we want to display? Try it

 - ( void )loadAnnotationImageWithURL:(NSString*)url imageView:(UIImageView*)imageView
 {
 //Cache the synthesized image  
 NSString *annoImageURL = url;
 NSString *annoImageCacheURL = [annoImageURL stringByAppendingString:@ "cache" ];
 UIImage *cacheImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:annoImageCacheURL];
 if ( cacheImage )
 {
 //LLLog(@"hit cache");  
 imageView.image = cacheImage;
 }
 else  
 {
 //LLLog(@"no cache");  
 [imageView sd_setImageWithURL:[NSURL URLWithString:annoImageURL]
 placeholderImage:placeHolderImage
 completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
 if (!error)
 {
 UIImage *annoImage = [image annotationImage];
 imageView.image = annoImage;
 [[SDImageCache sharedImageCache] storeImage:annoImage forKey:annoImageCacheURL];
 }
 }];
 }
 }
 @implementation UIImage (LJC)
 - (UIImage*) annotationImage
 {
 static UIView *snapshotView = nil;
 static UIImageView *imageView = nil;
 if ( !snapshotView )
 {
 snapshotView = [UIView new ];
 snapshotView.frame = CGRectMake( 0 , 0 , TRACK_ANNOTATION_SIZE.width, TRACK_ANNOTATION_SIZE.height);
 imageView = [UIImageView new ];
 [snapshotView addSubview:imageView];
 imageView.clipsToBounds = YES;
 imageView.frame = snapshotView.bounds;
 imageView.contentMode = UIViewContentModeScaleAspectFill;
 CGFloat arrowWidth = 14 ;
 CGMutablePathRef path = CGPathCreateMutable();
 CGRect rectangle = CGRectInset(CGRectMake( 0 , 0 , CGRectGetWidth(imageView.bounds), CGRectGetWidth(imageView.bounds)), 3 , 3 );
 CGPoint p[ 3 ] = {
 {CGRectGetMidX(imageView.bounds)-arrowWidth/ 2 , CGRectGetWidth(imageView.bounds)- 6 },
 {CGRectGetMidX(imageView.bounds)+arrowWidth/ 2 , CGRectGetWidth(imageView.bounds)- 6 },
 {CGRectGetMidX(imageView.bounds), CGRectGetHeight(imageView.bounds)- 4 }
 };
 CGPathAddRoundedRect(path, NULL, rectangle, 5 , 5 );
 CGPathAddLines(path, NULL, p, 3 );
 CGPathCloseSubpath(path);
 CAShapeLayer *shapelayer = [CAShapeLayer layer];
 shapelayer.frame = imageView.bounds;
 shapelayer.path = path;
 imageView.layer.mask = shapelayer;
 snapshotView.layer.shadowPath = path;
 snapshotView.layer.shadowRadius = 1 .0f;
 snapshotView.layer.shadowColor = [UIColor colorWithHex: 0x666666FF ].CGColor;
 snapshotView.layer.shadowOpacity = 1 .0f;
 snapshotView.layer.shadowOffset = CGSizeMake( 0 , 0 );
 CGPathRelease(path);
 }
 imageView.image = self;
 UIGraphicsBeginImageContextWithOptions(TRACK_ANNOTATION_SIZE, NO, 0 );
 [snapshotView.layer renderInContext:UIGraphicsGetCurrentContext()];
 UIImage *copied = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 return copied;
 }
 @end  

Then when using it, just simply call it as follows

 [self loadAnnotationImageWithURL:avatarURL imageView:annotationView.avatarView];

See how the modified Instruments performs

Color Blended Layers is unavoidable because what is displayed is a transparent image. However, due to the special nature of the map (the position of the avatar changes at a long interval, so it does not often trigger synthesis and there is no animation), so this is not a problem.

Color Misaligned Images are no longer a problem because the avatars have been scaled to the same size.

Color Offscreen-Rendered Yellow is fine because it is simply displaying an image and nothing needs to be rendered offscreen.

Let's look at the frame rate

Oh-Yeah~ Not only did the frame rate reach our target of 60 frames (because there are business logic threads running in the background, so it is not so stable), but the average running time has also dropped a lot. Even if we can display dozens more people on the map, it is no problem.

summary

Not only MKMapView, but also many places including UITableView can use the method mentioned in the article to optimize. The core point is synthesis + caching. Of course, since synthesis still consumes some resources, it is more suitable for small resources such as avatars.

For graphics performance optimization, you can read this good article (if you don’t understand the Debug Option mentioned in the article, here is a detailed explanation)