iOS之图像显示

图像显示原理

图像显示原理

    如上图所示：CPU计算视图frame，图片解码，绘制纹理交给GPU，GPU进行纹理混合，顶点变换，渲染到帧缓冲区，随后视频控制器会按照 VSync信号逐行读取帧缓冲区的数据，经过可能的数模转换传递给显示器显示。

画面撕裂现象

    在最简单的情况下，帧缓冲区只有一个，这时帧缓冲区的读取和刷新都都会有比较大的效率问题。为了解决效率问题，显示系统通常会引入两个缓冲区，即双缓冲机制。在这种情况下，GPU会预先渲染好一帧放入一个缓冲区内，让视频控制器读取，当下一帧渲染好后，GPU 会直接把视频控制器的指针指向第二个缓冲器。如此一来效率会有很大的提升。    

    双缓冲虽然能解决效率问题，但会引入一个新的问题。当视频控制器还未读取完成时，即屏幕内容刚显示一半时，GPU 将新的一帧内容提交到帧缓冲区并把两个缓冲区进行交换后，视频控制器就会把新的一帧数据的下半段显示到屏幕上，造成画面撕裂现象，为了解决这个问题，GPU 通常有一个机制叫做垂直同步（ V-Sync），当开启垂直同步后，GPU会等待显示器的 VSync 信号发出后，才进行新的一帧渲染和缓冲区更新。这样能解决画面撕裂现象，也增加了画面流畅度，但需要消费更多的计算资源，也会带来部分延迟。目前主流的移动设备会始终使用双缓存，并开启垂直同步。

CPU和GPU各自承担的工作

    CPU:        

        layout（UI布局和文字的计算）

        drawRect（绘制的过程）

        Prepare（图像的解码）

        Commit（提交位图）

    GPU:

        图层的合成

        纹理渲染

UI卡顿、掉帧

    一般来说，页面的流畅性是60FPS，代表着每秒有六十帧的画面更新，所谓的卡顿或者掉帧是因为刷新帧率小于16.7ms(人眼的接受帧率为1秒60帧位图是不会出现卡顿现象),也就是说一秒内要完成至少60个位图绘制渲染.当CPU计算或者绘制时间较长,导致GPU渲染加上CPU计算时间超过16.7ms就会出现卡顿、掉帧现象。

卡顿图示

大体有三种原因会导致卡顿：

    1.UI渲染需要时间较长，无法按时提交结果

    2.一些需要密集计算的处理放在了主线程中执行，导致主线程被阻塞，无法渲染UI界面

    3.网络请求由于网络状态的问题响应较慢，UI层由于没有模型返回无法渲染