iOS中图片的解压缩到渲染过程详解-创新互联

前言

在移动app开发过程中，图片往往是不可或缺的资源。从磁盘上加载一张图片，到显示到屏幕上，中间经过了一些复杂的过程，其中非常重要的一步就是对图片的解压缩。下面来一起看看详细的介绍吧

一.图像从文件到屏幕过程

通常计算机在显示是CPU与GPU协同合作完成一次渲染.接下来我们了解一下CPU/GPU等在这样一次渲染过程中,具体的分工是什么?

• CPU: 计算视图frame，图片解码，需要绘制纹理图片通过数据总线交给GPU
• GPU: 纹理混合，顶点变换与计算,像素点的填充计算，渲染到帧缓冲区。
• 时钟信号：垂直同步信号V-Sync / 水平同步信号H-Sync。
• iOS设备双缓冲机制：显示系统通常会引入两个帧缓冲区，双缓冲机制

图片显示到屏幕上是CPU与GPU的协作完成

对应应用来说，图片是最占用手机内存的资源，将一张图片从磁盘中加载出来，并最终显示到屏幕上，中间其实经过了一系列复杂的处理过程。

二.图片加载的工作流程

1、假设我们使用 +imageWithContentsOfFile: 方法从磁盘中加载一张图片，这个时候的图片并没有解压缩；

2、然后将生成的 UIImage 赋值给 UIImageView ；

3、接着一个隐式的 CATransaction 捕获到了 UIImageView 图层树的变化；

4、在主线程的下一个 runloop 到来时，Core Animation 提交了这个隐式的 transaction ，这个过程可能会对图片进行 copy 操作，而受图片是否字节对齐等因素的影响，这个 copy 操作可能会涉及以下部分或全部步骤：

• 分配内存缓冲区用于管理文件 IO 和解压缩操作；
• 将文件数据从磁盘读到内存中；
• 将压缩的图片数据解码成未压缩的位图形式，这是一个非常耗时的 CPU 操作；
• 最后 Core Animation 中CALayer使用未压缩的位图数据渲染 UIImageView 的图层。
• CPU计算好图片的Frame,对图片解压之后.就会交给GPU来做图片渲染

5、渲染流程

• GPU获取获取图片的坐标
• 将坐标交给顶点着色器(顶点计算)
• 将图片光栅化(获取图片对应屏幕上的像素点)
• 片元着色器计算(计算每个像素点的最终显示的颜色值)
• 从帧缓存区中渲染到屏幕上

我们提到了图片的解压缩是一个非常耗时的 CPU 操作，并且它默认是在主线程中执行的。那么当需要加载的图片比较多时，就会对我们应用的响应性造成严重的影响，尤其是在快速滑动的列表上，这个问题会表现得更加突出。

三.为什么要解压缩图片

既然图片的解压缩需要消耗大量的 CPU 时间，那么我们为什么还要对图片进行解压缩呢？是否可以不经过解压缩，而直接将图片显示到屏幕上呢？答案是否定的。要想弄明白这个问题，我们首先需要知道什么是位图

其实，位图就是一个像素数组，数组中的每个像素就代表着图片中的一个点。我们在应用中经常用到的 JPEG 和 PNG 图片就是位图

大家可以尝试

UIImage *image = [UIImage imageNamed:@"text.png"];
CFDataRef rawData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。