ImageView性能测试以及优化

demo github https://github.com/1271284056/UIImageView-performance-optimize
图片拉伸或者有混合图层(有透明度)时候都会消耗性能,xcode有工具测试我们的项目质量.

主要我们看两种
运行程序,模拟器打开,点击debug后出来一些选项

屏幕快照 2016-10-24 16.50.40.png

解释:

Color Blended Layers: 这个是检测混合图层的,如果有view有透明度的话对这一项打钩会显示红色,正常显示绿色.

Color Misaligned Images: 打钩后这个检测图像是否变形,变形的话显示黄色.

优化

1. Color Misaligned Images打钩后显示黄色的话,表明图片变形的话,我们写一个ImageView的分类,写一个方法传入图片和imageView的尺寸,返回一张这个尺寸的图片,imageView.image赋值时候用这个image:

• (UIImage *)rightSizeImage:(UIImage *)image andSize:(CGSize)imgeSize{
  // 1. 根据 imageView 的大小，重新调整 image 的大小
  // ` 重新生成一张和目标尺寸相同的图片
  UIGraphicsBeginImageContextWithOptions(imgeSize, YES, 0);
  // 绘制图像
  [image drawInRect:CGRectMake(0, 0, imgeSize.width, imgeSize.height)];
  // 取得结果
  UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
  // 关闭上下文
  UIGraphicsEndImageContext();
  return result;
  }

2. Color Blended Layers:混合图层打钩后如果layer有透明度,会显示红色

Simulator Screen Shot 2016年10月24日 16.51.58.png

如果检测到红色的话,找到透明度设置的地方,尽量不要设置透明度.

3. 还有如果我们设置图片圆角时候如果用了 imageView.layer.cornerRadius 和imageView.layer.masksToBounds = YES,会造成混合图层.我们用异步绘制裁剪的方法解决.

在UIImage的分类里面建一个方法,传入图片尺寸,圆角半径,被裁后的背景颜色,返回一张处理后的图片,代码如下

/**
如何回调：block - iOS 开发中，block最多的用途就是在异步执行完成之后，通过参数回调通知调用方结果！
*/

• (void)cornerImageWithSize:(CGSize)size fillColor:(UIColor *)fillColor cornerRadius:(CGFloat)cornerRadius completion:(void (^)(UIImage *))completion{

dispatch_async(dispatch_get_global_queue(0, 0), ^{
NSTimeInterval start = CACurrentMediaTime();
// 1. 利用绘图，建立上下文
UIGraphicsBeginImageContextWithOptions(size, YES, 0);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
// 2. 设置填充颜色
[fillColor setFill];
UIRectFill(rect);
// 3. 利用 贝赛尔路径 `裁切 效果
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:10];
[path addClip];
// 4. 绘制图像
[self drawInRect:rect];
// 5. 取得结果
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
// 6. 关闭上下文
UIGraphicsEndImageContext();
NSLog(@"%f", CACurrentMediaTime() - start);
// 7. 完成回调
dispatch_async(dispatch_get_main_queue(), ^{
if (completion != nil) {
completion(result);
}
});
});
}

处理后我们打开混合图层效果如下:

Simulator Screen Shot 2016年10月24日 16.52.50.png

为SDWebImage增加两个方法,使网络请求回来的图片自动调整大小.demo里面写有

• (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder size:(CGSize)picSize;

• (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder size:(CGSize)picSize cornerRadius:(CGFloat)cornerRadius fillColor:(UIColor *)fillColor;

我们为imageView赋值时候用下面方法

UIImageView *imgeVi = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, 200, 300)];
//1. 本地裁剪
// UIImage *image = [UIImage imageNamed:@"003.jpg"];
// image = [image rightSizeImage:image andSize:imgeVI.bounds.size];
// imgeVi.image = image;
//2. 不带圆角 网络请求
// [imgeVi sd_setImageWithURL:[NSURL URLWithString:@"http://s6.mogujie.cn/b7/bao/130928/c7k0_kqyw6vckkfbgeq3wgfjeg5sckzsew_500x750.jpg_200x999.jpg"] placeholderImage:[UIImage imageNamed:@"loading.png"] size:CGSizeMake(img.bounds.size.width, img.bounds.size.height)];
//3. 带圆角 网络请求
[imgeVi sd_setImageWithURL:[NSURL URLWithString:@"http://s6.mogujie.cn/b7/bao/130928/c7k0_kqyw6vckkfbgeq3wgfjeg5sckzsew_500x750.jpg_200x999.jpg"] placeholderImage:[UIImage imageNamed:@"loading.png"] size:CGSizeMake(img.bounds.size.width, img.bounds.size.height) cornerRadius:10 fillColor:[UIColor whiteColor]];
[self.view addSubview:imgeVi];