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的串行队列和并发队列的应用场景有何不同?

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容