iOS中图片渲染的流程

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

CC.图片渲染原理.png

接下来我们了解一下CPU和GPU在渲染的过程中的分工是什么?

CPU(中央处理器)

1. 计算frame.

2.解压缩图片.

3. 将需要绘制的纹理图片通过数据总线交给GPU.

GPU(图形处理器)

1. 顶点的计算和变换.

2. 像素点的填充计算和纹理混合.

3. 渲染到帧缓冲区.

图片显示到屏幕是CPU和GPU共同完成的

二. 图片加载的工作流程

1. 假设我们是用[UIImage imageWithContensOfFile:@"xxx.png"] 方法创建对象来加载一张图片, 这个时候只是创建一个管理图片压缩二进制数据的image对象, 并没有对图片进行解码.

2. 把UIImage对象赋值给UIImageView, 此时一个隐式的CATransaction捕获到的UIImageView图形树的变化.

3. 在线程的下一个运行循环(Runloop)到来时, Core Animation提交了这个隐式的transaction, 这个过程会对图片进行copy操作.这个copy操作可能会涉及以下部分或全部步骤：

分配内存缓冲区用于管理文件 IO 和解压缩操作；

将文件数据从磁盘读到内存中;

将压缩的图片数据解码成未压缩的位图形式，这是一个非常耗时的 CPU 操作；

最后Core Animation中CALayer使用未压缩的位图数据渲染UIImageView的图层。

CPU计算好图片的Frame,对图片解压之后.就会交给GPU来做图片渲染.

4.渲染流程

GPU获取到图片的坐标.

将坐标交给顶点着色器.(顶点计算)

将图片光栅化.(根据顶点坐标转化成片元, 片元的每一个元素对应帧缓冲区的一个像素点, 并且分配颜色值和深度值到各个区域, 光栅化是一个将模拟信号转化为离散信号的过程.)

片元着色器计算.(计算屏幕上每个像素点最终显示的颜色值)

从帧缓冲区渲染到屏幕上

我们提到了图片解码是一个非常好使的CPU操作, 并且默认是在主线程进行的, 所以当图片较多时对性能会造成很大的影响. 特别是快速滑动的列表上.

三. 为什么要解压缩图片

既然是耗时操作, 是否可以避免解压缩直接将图片显示到屏幕上呢? 答案是否定的. 要想弄明白这个问题, 我们应该先了解一下位图, 什么是位图呢?

其实, 位图是一个像素数组, 每一个元素代表图片中的一个点. 我们在程序中使用的PNG和JPEG图片就是位图.

事实上，不管是 JPEG 还是 PNG 图片，都是一种压缩的位图图形格式。只不过 PNG 图片是无损压缩，并且支持 alpha 通道，而 JPEG 图片则是有损压缩，可以指定 0-100% 的压缩比.

因此，在将磁盘中的图片渲染到屏幕之前，必须先要得到图片的原始像素数据，才能执行后续的绘制操作，这就是为什么需要对图片解压缩的原因。

四.解压缩原理

既然图片的解压缩不可避免，而我们也不想让它在主线程执行，影响我们应用的响应性，那么是否有比较好的解决方案呢？

我们前面已经提到了，当未解压缩的图片将要渲染到屏幕时，系统会在主线程对图片进行解压缩，而如果图片已经解压缩了，系统就不会再对图片进行解压缩。因此，也就有了业内的解决方案，在子线程提前对图片进行强制解压缩。

而强制解压缩的原理就是对图片进行重新绘制，得到一张新的解压缩后的位图。其中，用到的最核心的函数是 CGBitmapContextCreate:

解压缩代码步骤如下(YYImage实现):

CGBitmapInfobitmapInfo = kCGBitmapByteOrder32Host;

CGContextRef context =CGBitmapContextCreate(NULL, width, height,8,0, YYCGColorSpaceGetDeviceRGB(), bitmapInfo);//创建一个位图上下文

if(!context)returnNULL;

CGContextDrawImage(context,CGRectMake(0,0, width, height), imageRef);//decode 将原始位图绘制在上下文中

CGImageRef newImage =CGBitmapContextCreateImage(context);//创建一个新的解压缩后的位图

CFRelease(context);

它接受了一个原始位图imageRef, 最终返回了一个新的解压缩位图newImage.

事实上，SDWebImage 中对图片的解压缩过程与上述完全一致，只是传递给 CGBitmapContextCreate 函数的部分参数存在细微的差别.

性能对比:

在解压PNG图片,SDWebImage>YYImage

在解压JPEG图片,SDWebImage

结论:

1. 图片文件只有在确认要显示时才进行解压缩操作, 因为是一个耗时的CPU操作, 解压缩后会进行缓存, 不会对其重复解压缩.

2. 图片渲染的过程: 读取文件 -> 计算frame ->图片解码 ->解码后通过数据总线交给GPU ->GPU获取图片frame后进行顶点变换计算 ->光栅化 ->根据纹理坐标获取每一个像素点的颜色值 -> 交给帧缓冲区 ->渲染到屏幕上.

SDWebImage

YYImage