转载

iOS实录:网络图片的优化显示

导语:App中显示的图片大部分来自服务器,一般使用SDWebImage帮我们下载并显示,但是这并不是最好的效果,本文介绍如何优化网络图片的显示。

一、概述

1、SDWebImage库概述

  • SDWebImage库中,SDWebImageManager是管理器,持有SDWebImageDownloaderSDImageCache单例,负责调度图片的异步下载、缓存和获取。

  • SDWebImageDownloader是下载器,负责异步图片下载任务的调度,下载器中维持了一个图片下载队列,队列中管理若干SDWebImageDownloaderOperation下载任务;该任务继承自NSOperation,封装了图片的下载任务,支持并发操作。图片下载的网络请求和响应是由NSURLSession类负责管理的。SDImageCache是缓存器,负责下载图片的缓存和读取。

  • 总之,SDWebImage库提供了一整套的网络图片异步下载和缓存机制,还增加了UIImageView、UIButton等的Category,方便显示网络图片。

2、存在的问题

  • 由于网络图片一般不会有@2x和@3x之分,通过SDWebImage库下载的图片不加以处理就直接显示,会有一些常见的问题,如像素不对齐

  • App中经常使用圆角图片,一般采用裁剪图片的方式;但是这些图片源来自服务器(本地圆角图片让UI直接提供就可以了),我们需要在SDWebImage基础上增加对网络圆角图片的处理。

二、常见图片显示问题

主要有三类:像素不对齐、像素混合 和圆角处理

1、像素不对齐

  • 像素不对齐是指物理像素(pixel)不对齐;出现像素不对齐,会导致GPU在渲染时,对没对齐的边缘,进行插值计算,造成性能损耗了。

  • 当图片的size和显示图片View的size不同 或 图片的scale和屏幕的scale不同,就会发生像素不对齐的问题。要想像素对齐,必须保证image.size和显示图片view.size相等 且 image.scale和 [UIScreen mainScreen].scale相等

  • iPhone模拟器中的Debug -> Color Misaligned Images选项 或Core Animation->Display Settings->Color Misaligned Images选项都可以将像素不对齐的部分显示出来。

  • 当UIView(及其子类)的frame像素不对齐显示洋红色;当图片的像素大小与控件的大小不一致,显示黄色

说明:了解更多请参考iOS优化录1:解决iOS中像素不对齐问题

2、像素混合

  • 像素混合是指在某视图为透明背景色,GPU在渲染视图时,需要将该视图和下层视图混合(Blend)后才能计算出该像素点的实际颜色;这增加了GPU的工作,损耗了性能。

  • 当图片是透明图片时,像素混合必然会发生。所以显示的图片最好是不透明的。

  • iPhone模拟器中的Debug ->Color Blended Layers选项 和 Core Animation ->Display Settings ->Color Blended Layers都可以将像素混合的部分显示出来。

  • 发生了像素混合的区域显示红色,正常则显示绿色。

说明:之前对像素混合的关注比较少,而像素混合对性能的影响有多大,还需要后续工作中去验证;但是可以避免像素混合就尽量避免。

3、圆角图片的问题

  • 不建议的方案1:通过设置cornerRadius值和masksToBounds=YES实现圆角效果。因为它会触发GPU的离屏渲染,引起性能问题。模拟器中的Color Offscreen-Rendered可以检测是否发生离屏渲染(如果出现黄色就发生了离屏渲染)。

  • 不建议的方案2:通过设置view.layer的mask属性,将另一个layer盖在view上,也可以实现圆角的效果,但是同样会触发离屏渲染,引起性能问题。

  • 可参考的方案:在需要添加圆角的视图上再叠加一个部分透明的视图,只对圆角部分进行遮挡。虽然不会有离屏渲染和额外的GPU计算,但是不灵活,使用范围有限。

  • 建议的方案:使用Core Graphics重新绘制带圆角的图片,虽然在显示上提升了性能,但是增加了绘制的工作,所以要做好异步绘制和缓存工作,尽可能避免重复绘制。

说明:离屏渲染是图片圆角处理中讨论比较多的问题,利用Core Graphics绘制是个比较主流的选择。

三、QSImageProcess方案

QSImageProcess方案是我定制的图片处理方案,为了适应对本地图片以及网络图片的处理,做了一些优化工作。

1、核心类:QSImageProcess

可以同步或异步处理图片,接口定义如下:

typedef void(^QSImageProcessCompletedBlock)(UIImage *outputImage);
@class QSImageProcessConfig;
@interface QSImageProcess : NSObject
/**
 图片处理配置对象
 */
@property (nonatomic,strong)QSImageProcessConfig *config;
+ (nonnull instancetype)sharedInstance;
/**
 异步图片处理
 @param image 待处理的图片
 @param config 图片处理配置对象
 @param completedBlock 处理完成块
 */
- (void)processImage:(UIImage *)image
              config:(QSImageProcessConfig *)config
           completed:(QSImageProcessCompletedBlock)completedBlock;
/**
 同步图片处理
 @param image 待处理的图片
 @param config 图片处理配置对象
 @return 返回处理好的图片
 */
- (UIImage *)processImage:(UIImage *)image
                   config:(QSImageProcessConfig *)config;
@end

说明:图片的处理是耗时操作,在异步处理中,将该任务应交给GCD并发队列,通过QSDispatchQueue控制并发队列的最大并发数

2、UIImageView的QSImageProcess分类

@interface UIImageView (QSImageProcess)
/**
 加载并显示网络图片,调用前需要先设置好UIImageView的frame或bounds
 @param url 图片url
 @param placeholder 图片处理配置对象
 */
- (void)qs_setImageWithURL:(nullable NSURL *)url
          placeholderImage:(nullable UIImage *)placeholder;
/**
  加载并显示网络图片
 @param url 图片url
 @param placeholder 占位图
 @param config 图片处理配置对象
 */
- (void)qs_setImageWithURL:(nullable NSURL *)url
          placeholderImage:(nullable UIImage *)placeholder
                    config:(QSImageProcessConfig *)config;
@end

说明1:接口1不需要设置QSImageProcessConfig对象,采用默认的方式,根据UIImageView的size来输出显示不发生 像素混合和像素不对齐的图片

说明2:接口2使用时候,通过配置QSImageProcessConfig对象,然后交由SDWebImageExtension去异步裁剪、缩放图片,最后显示出来。

3、其他

  • QSProcessImageConfig是图片处理配置对象,可以设置option(图片处理选项)、outputSize(图片输出大小)、clipBgColor(裁剪图片需要的背景颜色)、cornerRadius(圆角半径)、corners(需要处理的圆角)等。

  • 图片的处理包括裁剪圆角、添加蒙版等(后期继续补充)。

typedef NS_ENUM(NSInteger,QSImageProcessOption) {
    QSImageProcessOptionDefault = 0,
    QSImageProcessOptionClipCorner = 1,
    QSImageProcessOptionCircle = 2,
    QSImageProcessOptionRound = 3,
    QSImageProcessOptionAddGradationMask = 4,
    QSImageProcessOptionAddWholeMask = 5
};

图片处理使用Core Graphics实现。在使用UIGraphicsBeginImageContextWithOptions创建上下文时候,opaque默认为YES,表示不透明;如果是裁剪,需要传入背景色,否则被裁去的部分是黑色。

四、QSImageProcess方案的使用

1、使用介绍

a) 安装QSImageProcess

pod 'QSImageProcess'

b) 引入头文件

#import "QSImageProcess.h"
#import "UIImageView+QSImageProcess.h"

c) 代码示范

//加载网络图片1,默认config
[self.imageView qs_setImageWithURL:url
                placeholderImage:placeholderImage];
//加载网络图片2,自定义config
QSImageProcessConfig *config = [QSImageProcessConfig configWithOutputSize:self.imageView.frame.size cornerRadius:cornerRadius corners:UIRectCornerAllCorners];
[self.imageView qs_setImageWithURL:url
                  placeholderImage:placeholderImage
                            config:configs];
//处理本地图片
QSImageProcessConfig *config = [QSImageProcessConfig configWithOutputSize:self.imageView.frame.size cornerRadius:cornerRadius corners:UIRectCornerAllCorners];
//异步
[[QSImageProcess sharedInstance]processImage:image config:config completed:^(UIImage *outputImage) {
    self.imageView1.image = outputImage;
}];
//同步
self.imageView2.image = [[QSImageProcess sharedInstance]processImage:image config:config];

2、效果1

简单实现一个Demo,通过QSImageProcess实现对本地图片的不同处理。

iOS实录:网络图片的优化显示

说明1:模拟器开启了Color Blended Layers、Color Misaligned Images选项。

说明2:没有开启Color Offscreen-Rendered是因为Controller通过push进入,整个Controller在下是显示黄色(离屏渲染),这和系统的UINavigationController有关,具体原因需要后续去发现。使用present弹出不会有这个问题。

说明3:第三行第三列(第9个)图片出现被红色区域覆盖,说明这里出现了像素混合,这是因为该图片处理要求输出透明的圆形图片。其config对象如下:

QSImageProcessConfig *config9 = [QSImageProcessConfig circleConfigWithOutputSize:_cellSize];  //透明圆形图片

3、效果2

简单实现一个Demo,通过UIImageView (QSImageProcess)分类实现对网络图片的不同处理。

iOS实录:网络图片的优化显示

说明1:模拟器开启了Color Blended Layers、Color Misaligned Images选项。

说明2:经过处理的网络图片,最后通过SDWebCache缓存下来,相同的绘制需求不需要重复绘制。

说明3:被红色区域覆盖的图片,是因为该图片处理要求输出透明的圆形图片(发生像素混合了)。

End

  • 相关文章

iOS实录5:iOS中本地图片的缩放、裁剪和压缩

  • 项目地址

QSImageProcess

正文到此结束
Loading...