image.png
位图
图片的本质就是由许多的像素点构成的，而前面所说的位图实际上就是一个装着这些像素点的数组。而我们平时开发经常用的PNG或者JPG图片，都是一种压缩的位图图形格式。只不过 PNG图片是无损压缩，并且支持 alpha 通道。而 JPEG 图片则是有损压缩，可以指定 0-100% 的压缩比。
图像加载过程
iOS从磁盘加载一张图片，使用UIImageView显示在屏幕上，加载流程如下:
- 我们使用
+imageWithContentsOfFile:(使用Image I/O创建CGImageRef内存映射数据)方法从磁盘中加载一张图片。此时，图片尚未解码。在这个过程中先从磁盘拷贝数据到内核缓冲区，再从内核缓冲区复制数据到用户空间。 - 生成
UIImageView，把图像数据赋值给UIImageView，如果图像数据未解码(PNG/JPG)，解码为位图数据。 - 隐式
CATransaction捕获到UIImageView layer树的变化。 - 在主线程的下一个 runloop 到来时，
Core Animation提交了这个隐式的transaction，这个过程可能会对图片进行copy操作，而受图片是否字节对齐等因素的影响，这个copy操作可能会涉及以下部分或全部步骤：
- 分配内存缓冲区用于管理文件 IO 和解压缩操作；
- 将文件数据从磁盘读到内存中；
- 将压缩的图片数据解码成未压缩的位图形式，这是一个非常耗时的 CPU 操作；
- 然后
Core Animation中CALayer使用未压缩的位图数据渲染UIImageView的图层。 - 最后CPU计算好图片的
Frame,对图片解压之后.就会交给GPU来做图片渲染。
- 渲染流程
- GPU获取获取图片的坐标
- 将坐标交给顶点着色器(顶点计算)
- 将图片光栅化(获取图片对应屏幕上的像素点)
- 片元着色器计算(计算每个像素点的最终显示的颜色值)
- 从帧缓存区中渲染到屏幕上
在最简单的情况下，帧缓冲区只有一个，这时帧缓冲区的读取和刷新都都会有比较大的效率问题。为了解决效率问题，显示系统通常会引入两个缓冲区，即双缓冲机制。在这种情况下，GPU 会预先渲染好一帧放入一个缓冲区内，让视频控制器读取，当下一帧渲染好后，GPU 会直接把视频控制器的指针指向第二个缓冲器。如此一来效率会有很大的提升。
双缓冲虽然能解决效率问题，但会引入一个新的问题。当视频控制器还未读取完成时，即屏幕内容刚显示一半时，GPU 将新的一帧内容提交到帧缓冲区并把两个缓冲区进行交换后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂现象。
为了解决这个问题，GPU 通常有一个机制叫做垂直同步（简写也是 V-Sync），当开启垂直同步后，GPU 会等待显示器的 VSync 信号发出后，才进行新的一帧渲染和缓冲区更新。这样能解决画面撕裂现象，也增加了画面流畅度，但需要消费更多的计算资源，也会带来部分延迟。
从上面我们也可以看到通常计算机在显示是CPU与GPU协同合作完成一次渲染.接下来我们了解一下CPU/GPU等在这样一次渲染过程中,具体的分工是什么?
- CPU: 计算视图
frame，图片解码，需要绘制纹理图片通过数据总线交给GPU - GPU: 纹理混合，顶点变换与计算,像素点的填充计算，渲染到帧缓冲区
- 时钟信号：垂直同步信号
V-Sync/ 水平同步信号H-Sync - iOS设备双缓冲机制：显示系统通常会引入两个帧缓冲区，双缓冲机制（从相关资料可以知道，iOS 设备会始终使用双缓存，并开启垂直同步。而安卓设备直到 4.1 版本，Google 才开始引入这种机制，目前安卓系统是三缓存+垂直同步）
- 图片显示到屏幕上是CPU与GPU的协作完成
对应用来说，图片是最占用手机内存的资源，将一张图片从磁盘中加载出来，并最终显示到屏幕上，中间其实经过了一系列复杂的处理过程。
总结：
图片文件只有在确认要显示时,CPU才会对齐进行解压缩.因为解压是非常消耗性能的事情.解压过的图片就不会重复解压,会缓存起来.
图片渲染到屏幕的过程:
a. CPU 读取文件->计算Frame->图片解码->解码后纹理图片位图数据通过数据总线交给GPU
b. GPU获取图片Frame->顶点变换计算->光栅化->根据纹理坐标获取每个像素点的颜色值(如果出现透明值需要将每个像素点的颜色*透明度值)->渲染到帧缓存区->渲染到屏幕
网友评论