WWDC18：图形图像最佳实践（一）

上周四收到了Apple发来的邮件说是WWDC18视频配有中文字幕了，其实6月份就看过一部分，但全英文无任何字幕看起来略（马）显（拉）吃（个）力（币），所以看到有字幕迫不及待，把自己感兴趣的几个Session看了一遍，虽然并没有发现有中文字幕，但有英文字幕也起比之前顺畅多了，好了进入正题分享下 WWDC 18 Session 219 :Image and Graphics Best Practices ,图形图像最佳实践，此Session由Kyle Sluder分享。

问题

我还是先抛个问题吧，下图渲染后占用多大内存？没错，这个问题今天不讲！这个知识点在 WWDC 18 Session 416 iOS Memory Deep Dive有较深入的探讨，挺有趣的。

UIImage and UIImageView

1.1 渲染的过程

在Cocoa的MVC架构中，UIImage扮演Model的角色，UIImageView则充当View的角色，UIImage用于加载图片内容，UIImageView负责将图片内容渲染和显示，一个Image在屏幕中显示流程如下图所示。但在讨论Decode（解码）环节前，我们得先明确Buffers的概念。

1.2 Buffers

Image Buffer中的每一个元素描述的是一个像素的颜色信息，Buffer的size与图片的size为正相关关系。Image Buffer的一个典型例子便是framebuffer，framebuffer真正管理着屏幕的输出。

在应用程序更新图层时，UIKit将window及其subviews渲染至frame buffer，这个frame buffer提供每个像素的信息以供显示硬件定时读取，读取的频率一般为60Hz，但在ipad pro上可提升至120Hz。 与Image Buffer不同，Data Buffer存储着一个图片文件的内容，通常为JPG,PNG等压缩格式，因此其内容不是直接与像素的信息一一对应。metadata存储着图片的尺寸。

1.3 Decode过程

理解了buffers的概念后，我们接着分析Decode环节的。如上图所示，在实际的渲染过程中，UIImage负责解压Data Buffer内容并申请buffer（Image Buffer）存储解码后的图片信息，然后UIImageView负责将Image Buffer 拷贝至 framebuffer，用于给显示硬件提供颜色信息。

解压过程是一个大量占用CPU资源的工作，因此UIImage 会持有解码后的Image Buffer以便给渲染工作提供信息，Image Buffer与图片的实际尺寸有关，与图片文件大小无关。若是在TableView等列表中连续加载多张图片，便会引发连续的大块内存分配，这将对Memory和CPU带来沉重的负担。

1.4 DownSampling

DownSampling即在Decode前插入创建缩略图的过程。如下图所示，即对image进行预处理，采用缩小解码后Image Buffer的size的方式，减少内存的占用。此处需注意两个选项的设置。

1.kCGImageSourceShouldCache此处设为false，目的在于告知系统此imageSource仅为建立与imageURL的链接，不需要解码。 

2.kCGImageSourceShouldCacheImmediately设为true，以此控制系统以计算出的size创建Image Buffer并解压。

经过此预处理图片后，内存占用的前后对比如下，减少大约50%的内存占用率：

此处通过两种手段解决主线程卡顿的问题：

1. 预加载. 

2. 异步解码. 

异步解码需注意，不要通过dispatch至global queue中，可能会导致 thread explosion（线程爆炸）的问题。这里问一句，为何下面的写法会炸？

1.5 Image Source

推荐使用Image Assets，主要有如下几点原因:

1.对基于名字和特性的查找做了优化. 

2.更加智能的缓存策略. 

3.针对设备选择相应的图片. 

4.支持矢量图. 

从iOS11之后，Image Assets支持 Preserve Vector Data 选项，系统会在compile过程保留矢量图信息，以防止图片渲染至超出或小于自身尺寸的view中引发的模糊问题。

Custom drawing with UIKit 

2.1 Custom drawing

我们知道，UIView的CALayer负责将contents传递给frame buffer，当重写draw：函数后，CALayer会负责创建一个Backing Store（尺寸与view显示的size成正相关），然后在此Backing store上执行draw：函数，最后将其中的内容传递给frame buffer。

减少Backing Store的使用，减少Backing Store的使用，减少Backing Store的使用 （三遍说明重要）。针对live按钮的实现，我们应该将大的view化为多个subview的组合，减少draw：函数的使用减少imageData的多重拷贝（在给出的解决方案中，会将image ‘draw at’ Backing store，多了一次imageData的拷贝动作），使用优化的选项和属性（UIView的backgroundColor属性可以不通过Backing store直接渲染至framebuffer。但pattern color例外，可用添加imageview为subview代替）。

2.2 背景的实现

2.3 图片的实现

2.4 文字的实现

3. Advanced CPU and GPU

此sessions对这一部分仅做了简单的描述，篇幅限制不做分享。

最后WWDC都挺有趣的，建议各位可以抽时间研究研究，接下来我应该也还会对其他Sessions做一些脱水分享。

推荐阅读：

1. Image and Graphics Best Practices  

   https://developer.apple.com/videos/play/wwdc2018/219/

2. iOS Memory Deep Dive https://developer.apple.com/videos/play/wwdc2018/416

3. iOStips，高级进阶电子书干货分享！

PS：公号后台回复关键词【 深入理解计算机系统 】可获得电子版

更多骚操作，尽在iOSTips，关注公众号，第一时间get新姿势。