学习笔记_iOS 图片从文件渲染到屏幕的过程

最新推荐文章于 2024-09-12 19:36:10 发布

墨谨礼

最新推荐文章于 2024-09-12 19:36:10 发布

阅读量897

点赞数 1

分类专栏：音视频学习

本文链接：https://blog.csdn.net/u010682633/article/details/106960755

版权

音视频学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

理解iOS中图片从文件渲染屏幕的过程

本文涉及到的一些名词名词解释可以参考学习笔记_OpenGL下专业名词解释

一般情况下，显示是由 CPU 和 GPU 协作来完成的渲染，一次渲染的过程中，分工大致如下：
CPU：计算 frame，图片解码，通过数据总线将需要绘制的纹理图片交给GPU
GPU：纹理混合，顶点变换与计算，像素点的填充计算，渲染到帧缓冲区。

图片加载的工作流程

假设使用 +imageWithContentsOfFile: 方法从磁盘中加载一张图片，这个时候的图片并没有解压缩；
然后将生成的 UIImage 赋值给 UIImageView；
接着一个隐式的 CATransaction 捕获到了 UIImageView 图层树的变化；
在主线层的下一个 runloop 到来时，Core Animation 提交了这个隐式的 transaction，这个过程可能会对图片进行 copy 操作，而受图片是否字节对齐等因素的影响，这个 copy 操作可能会涉及一下部分或全部步骤：

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

渲染流程：

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

由于图片压缩是一个非常耗时的 CPU 操作，并且它是默认在主线程中执行，当需要加载的图片比较多的时候，就会对应用性能造成严重影响，尤其是在快速滑动列表时，这个问题尤其明显。

为什么要解压缩图片

既然图片的解压缩十分消耗性能，为什么还要进行图片的解压缩而不是直接将图片显示在屏幕上呢？为了解释这个问题，就需要先了解什么是位图。
位图就是一个像素数组，数组中的每个像素点就代表图片中的一个点。我们经常接触到的 JPEG 和 PNG 图片就是位图，而他们事实上是一种压缩的位图图形格式，只不过 PNG 是无损压缩，并且支持 alpha 通道，而 JPEG 图片则是有损压缩，可以指定 0-100%的压缩比。因此，在将磁盘中的图片渲染到屏幕之前，必须先要得到图片的原始像素数据，才能执行后续的绘制操作，这就是为什么要对图片解压缩的原因。

解压缩原理

当未解压缩的图片将要渲染到屏幕时，系统会在主线程对图片进行解压缩，而如果图片已经解压缩了，系统就不会再对图片进行解压缩，而解压缩十分消耗性能，我们不希望让它在主线程执行，因此就有了业内常用的解决方案，在子线程提前对图片进行解压缩。
强制解压缩的原理就是对图片进行重新绘制，得到一张新的解压缩后的位图。其中用到的最核心的函数就是 CGBitmapContextCreate ：

CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data,
    size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
    CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
    CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

data ：如果不为 NULL，那么它应该指向一块大小至少为 bytesPerRow * height 字节的内存；如果为 NULL，那么系统就会为我们自动分配和释放所需的内存，所以一般指定 NULL 即可；
width 和 height ：位图的宽度和高度，分别赋值为图片的像素宽度和像素高度即可；
bitsPerComponent ：像素的每个颜色分量使用的比特数，在 RGB 颜色空间下指定为 8 即可；
bytesPerRow ：位图的每一行使用的字节数，大小至少为 width * bytes per pixel 字节。当指定为 0/NULL 时，系统不仅会自动计算，还会进行 cache line alignment 的优化。
space ：就是之前提到的颜色空间，一般使用 RGB 即可；
bitmapInfo ：位图的布局信息。kCGImageAlphaPremultipliedFirst

总结

图片文件只有在确认要显示时，CPU 才会对其进行解压缩。因为解压缩是非常耗时性能的事情，解压过的图片就不会重复解压，会缓存起来。
图片渲染到屏幕的过程：读取文件 -> 计算 Frame -> 图片解码 -> 解码后纹理图片位图数据通过数据总线交给 GPU -> GPU获取图片 Frame -> 顶点变换计算 -> 光栅化 -> 根据纹理坐标获取每个像素点的颜色值（如果出现透明值需要将每个像素点的颜色*透明值度）-> 渲染到帧缓存区 -> 渲染到屏幕