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<YYImage


结论:

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

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

SDWebImage

YYImage

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