iOS性能优化——图片加载和处理

前言

本文基于WWDC2018-Image and Graphics Best Practices，对图片加载和处理的思考和总结。 本文不是WWDC翻译，如果需要了解视频内容可以点击上面的链接观看。

正文

图片的显示分为三步：加载、解码、渲染。 通常，我们操作的只有加载，解码和渲染是由UIKit进行。

什么是解码？

以UIImageView为例。当其显示在屏幕上时，需要UIImage作为数据源。 UIImage持有的数据是未解码的压缩数据，能节省较多的内存和加快存储。 当UIImage被赋值给UIImage时（例如imageView.image = image;），图像数据会被解码，变成RGB的颜色数据。 解码是一个计算量较大的任务，且需要CPU来执行；并且解码出来的图片体积与图片的宽高有关系，而与图片原来的体积无关。 其体积大小可简单描述为：宽 * 高 * 每个像素点的大小 = width * height * 4bytes。

图像解码操作会造成什么问题？

以我们常见的UITableView和UICollectionView为例，假如我们在使用一个多图片显示的功能：

在上下滑动显示图片的过程中，我们会在cellFor的方法加载UIImage图片、赋值给UIImageView，相当于在主线程同时进行IO操作、解码操作等，会造成内存迅速增长和CPU负载瞬间提升。 并且内存的迅速增加会触发系统的内存回收机制，尝试回收其他后台进程的内存，增加CPU的工作量。如果系统无法提供足够的内存，则会先结束其他后台进程，最终无法满足的话会结束当前进程。

那么如何对这种情况进行优化 ？

优化1：降采样

在滑动显示的过程中，图片显示的宽高远比真实图片要小，我们可以采用加载缩略图的方式减少图片的占用内存。 如下图所示：

我们加载jpeg的图片，然后进行相关设置，解码后根据设置生成CGImage缩略图，最后包装成UIImage，最终传递给UIImageView渲染。 思考：这里的解码步骤为何不是上文提到的imageView.image=image时机？

func downsample(imageAt imageURL: URL, to pointSize: CGSize, scale: CGFloat) -> UIImage {
let imageSourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
let imageSource = CGImageSourceCreateWithURL(imageURL as CFURL, imageSourceOptions)!
let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale
let downsampleOptions = [kCGImageSourceCreateThumbnailFromImageAlways: true,
kCGImageSourceShouldCacheImmediately: true,
kCGImageSourceCreateThumbnailWithTransform: true,
kCGImageSourceThumbnailMaxPixelSize: maxDimensionInPixels] as CFDictionary
let downsampledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, downsampleOptions)!
return UIImage(cgImage: downsampledImage)
}

我的理解：正常的UIImage加载是从APP本地读取，或者从网络下载图片，此时不涉及图片内容相关的操作，并不需要解码；当图片被赋值给UIImageView时，CALayer读取图片内容进行渲染，所以需要对图片进行解码； 而上文的缩略图生成过程中，已经对图片进行解码操作，此时的UIImage只是一个CGImage的封装，所以当UIImage赋值给UIImageView时，CALayer可以直接使用CGImage所持有的图像数据。

优化2：异步处理

从用户的体验来分析，滑动的操作往往是间断性触发，在滑动的瞬间有较大的工作量，而且由于都是在主线程进行操作无法进行任务分配，CPU 2处于闲置。由此引申出两种优化手段：Prefetching（预处理）和 Background decoding/downsampling（子线程解码和降采样）。综合起来，可以在Prefetching的时候把降采样放到子线程进行处理，因为降采样过程就包括解码操作。

Prefetching回调中，把降采样的操作放到同步队列serialQueue中，处理完毕之后抛给主线程进行update操作。 需要特别注意，此处不能是异步队列，否则会造成线程爆炸，原因见总结部分。

优化3：使用Image Asset Catalogs

Apple推荐的图片资源管理工具，压缩效率更高，在iOS 12的机器上有10~20%的空间节约，并且每个版本Apple都会持续对其进行优化。 内容较多，详细可点Session。

总结

应用上述的优化策略，已经能对图片加载有比较好的优化。 WWDC后续还有对CustomDrawing和CALayer的BackingStore的介绍，因为与图片关系不大，不在此赘述。

下面再介绍我对WWDC学习的看法。

附录

我们可以先主观假设两个前提： 1、大部分苹果工程师对iOS系统内部实现都比我们要清楚； 2、能到WWDC分享的工程师在苹果内部也是优秀的工程师；

那么WWDC所讲的内容我们可以认为是事实上的结果。 于是可以使用我们所掌握的基础知识，还有对iOS系统的了解来分析WWDC上面所提到的现象，看我们的iOS知识体系是否存在缺陷；另外，WWDC介绍的很多知识点同样免验证的加入自己的知识体系。 这就是我比较喜欢的一种看WWDC视频的学习方式。 以上文提到的线程爆炸为例，看看这种方式的好处。

原文如下： Thread Explosion（线程爆炸） More images to decode than available CPUs（解码图像数量大于CPU数量） GCD continues creating threads as new work is enqueued（GCD创建新线程处理新的任务） Each thread gets less time to actually decode images（每个线程获得很少的时间解码图像）

从这个案例我们学习到如何避免图像解码的线程爆炸，但还能扩散思维：

我们分析苹果工程师的逻辑： 原因（解码任务过多）==> 过程（GCD开启更多线程） ==> 结果（ 每个线程获得更少的时间） 延伸出来的问题有： GCD是如何处理异步队列？为何会启动多个线程处理？ 多少的线程数量是合适的？线程的cpu时间分配和切换代价如何？ ... 举一反三，类似的问题太多。但是这样的思考稍显混乱，仍有优化的空间。

把脑海关于GCD的认知提炼出来： 1、GCD是用来处理一系列任务的同步和异步执行，队列有串行和并发两种，与线程的关系只有主线程和非主线程的区别； 2、串行队列是执行完当前的任务，才会执行下一个block任务；并行队列是多个block任务并行执行，GCD会根据任务的执行情况分配线程，原则是尽快完成所有任务；

接下来的表现是操作系统相关的知识： 1、iOS系统中进程和线程的关联，每个启动的APP都是一个进程，其中有多个线程； 2、cpu的时间是分为多个时间片，每个线程轮询执行； 3、线程切换执行有代价，但比进程切换小得多； 4、每个cpu核心在同一时刻只能执行一个线程；

至此我们可以结合操作系统和GCD的知识，猜测底层GCD的实现思路和线程爆炸情况下的表现： 主线程把多个任务block放到并发队列，GCD先启动一个线程处理解码任务，线程执行过程中遇到耗时操作时（IO等待、大量CPU计算），短时间内无法完成，为了不阻塞后续任务的执行，GCD启动新的线程处理新的任务。

集合此案例，我们能回答相关问题： 1、现在有一个很复杂的计算任务，例如是统计一个5000x5000图片中像素点的RGB颜色通道，如果用分为25个任务放到GCD并发队列，把大图切分成25个1000x1000小图分别统计，是否会速度的提升？ 2、GCD的串行队列和并发队列的应用场景有何不同？

以上一些平时学习的感受。 如果能对你有所触动，十分荣幸； 如果你觉得能改进，欢迎提出来帮助我成长； 如果你觉得毫无用处，至少你知道一种错误的学习方法。