正文
图片的显示分为三步:加载、解码、渲染。 通常,我们操作的只有加载,解码和渲染是由UIKit进行。
image.png什么是解码?
以UIImageView为例。当其显示在屏幕上时,需要UIImage作为数据源。 UIImage持有的数据是未解码的压缩数据,能节省较多的内存和加快存储。 当UIImage被赋值给UIImage时(例如imageView.image = image;
),图像数据会被解码,变成RGB的颜色数据。 解码是一个计算量较大的任务,且需要CPU来执行;并且解码出来的图片体积与图片的宽高有关系,而与图片原来的体积无关。 其体积大小可简单描述为:宽 * 高 * 每个像素点的大小 = width * height * 4bytes。
图像解码操作会造成什么问题?
以我们常见的UITableView和UICollectionView为例,假如我们在使用一个多图片显示的功能:
image.png在上下滑动显示图片的过程中,我们会在cellFor的方法加载UIImage图片、赋值给UIImageView,相当于在主线程同时进行IO操作、解码操作等,会造成内存迅速增长和CPU负载瞬间提升。 并且内存的迅速增加会触发系统的内存回收机制,尝试回收其他后台进程的内存,增加CPU的工作量。如果系统无法提供足够的内存,则会先结束其他后台进程,最终无法满足的话会结束当前进程。
image.png那么如何对这种情况进行优化 ?
优化1:降采样
在滑动显示的过程中,图片显示的宽高远比真实图片要小,我们可以采用加载缩略图的方式减少图片的占用内存。 如下图所示:
image.png我们加载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:异步处理
image.png从用户的体验来分析,滑动的操作往往是间断性触发,在滑动的瞬间有较大的工作量,而且由于都是在主线程进行操作无法进行任务分配,CPU 2处于闲置。由此引申出两种优化手段:Prefetching(预处理)和 Background decoding/downsampling(子线程解码和降采样)。综合起来,可以在Prefetching的时候把降采样放到子线程进行处理,因为降采样过程就包括解码操作。
image.pngPrefetching回调中,把降采样的操作放到同步队列serialQueue中,处理完毕之后抛给主线程进行update操作。 需要特别注意,此处不能是异步队列,否则会造成线程爆炸,原因见总结部分。
image.png优化3:使用Image Asset Catalogs
Apple推荐的图片资源管理工具,压缩效率更高,在iOS 12的机器上有10~20%的空间节约,并且每个版本Apple都会持续对其进行优化。 内容较多,详细可点Session。
总结
应用上述的优化策略,已经能对图片加载有比较好的优化。 WWDC后续还有对CustomDrawing和CALayer的BackingStore的介绍,因为与图片关系不大,不在此赘述。
网友评论