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

2017-08-13 本文已影响2346人南华coder

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

一、概述

1、SDWebImage库概述

在SDWebImage库中，SDWebImageManager是管理器，持有SDWebImageDownloader和SDImageCache单例，负责调度图片的异步下载、缓存和获取。
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'

tips：如果pod search 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实现对本地图片的不同处理。

本地图片处理效果.png

说明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)分类实现对网络图片的不同处理。

网络图片处理效果.png