让iOS界面保持流畅的几个技巧.pdfVIP

让iOS界面保持流畅的几个技巧 这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应 的解决思路 同时给出一个开源的微博列表实现 通过实际的代码展示 如何构建流畅的交互。 Index 1.演示项目 2.屏幕显示图像的原理 3.卡顿产生的原因和解决方案 ·CPU 资源消耗原因和解决方案 ·GPU 资源消耗原因和解决方案 4.AsyncDisplayKit ·ASDK 的由来 ·ASDK 的资料 ·ASDK 的基本原理 ·ASDK 的图层预合成 ·ASDK 异步并发操作 ·Runloop 任务分发 5.微博 Demo 性能优化技巧 · 预排版 · 预渲染 · 异步绘制 · 全局并发控制 · 更高效的异步图片加载 · 其他可以改进的地方 6.如何评测界面的流畅度 演示项目 在开始技术讨论前 你可以先下载我写的 Demo 跑到真机上体验一下： /ibireme/YYKit。Demo 里包含一个微博的 Feed 列 表、发布视图，还包含一个 Twitter 的 Feed 列表。为了公平起见 所有界面和交互我都从官方应用原封不动的抄了过来 数据也都是从官 方应用抓取的。你也可以自己抓取数据替换掉 Demo 中的数据，方便 进行对比。尽管官方应用背后的功能更多更为复杂 但不至于会带来太 大的交互性能差异。 这个 Demo 最低可以运行在 iOS6 上 所以你可以把它跑到老设备上 体验一下。在我的测试中 即使在 iPhone4S 或者 iPad3 上 Demo 列表在快速滑动时仍然能保持 50~60FPS 的流畅交互 而其他诸如微 博、朋友圈等应用的列表视图在滑动时已经有很严重的卡顿了。 微博的 Demo 有大约四千行代码 Twitter 的只有两千行左右代码 第 三方库只用到了 YYKit 文件数量比较少 方便查看。好了 下面是正 文。 屏幕显示图像的原理 首先从过去的 CRT 显示器原理说起。CRT 的电子枪按照上面方式 从上到下一行行扫描 扫描完成后显示器就呈现一帧画面 随后电子枪 回到初始位置继续下一次扫描。为了把显示器的显示过程和系统的视频 控制器进行同步 显示器 （或者其他硬件）会用硬件时钟产生一系列的 定时信号。当电子枪换到新的一行 准备进行扫描时 显示器会发出一 个水平同步信号（horizonalsynchronization），简称 HSync；而当一 帧画面绘制完成后 电子枪回复到原位 准备画下一帧前 显示器会发 出一个垂直同步信号（verticalsynchronization），简称 VSync。显示 器通常以固定频率进行刷新，这个刷新率就是 VSync 信号产生的频 率。尽管现在的设备大都是液晶显示屏了，但原理仍然没有变。 通常来说 计算机系统中 CPU、GPU、显示器是以上面这种方式协同 工作的。CPU 计算好显示内容提交到 GPU GPU 渲染完成后将渲染 结果放入帧缓冲区 随后视频控制器会按照 VSync 信号逐行读取帧缓 冲区的数据，经过可能的数模转换传递给显示器显示。 在最简单的情况下 帧缓冲区只有一个 这时帧缓冲区的读取和刷新都 都会有比较大的效率问题。为了解决效率问题 显示系统通常会引入两 个缓冲区，即双缓冲机制。在这种情况下 GPU 会预先渲染好一帧放 入一个缓冲区内，让视频控制器读取，当下一帧渲染好后 GPU 会直 接把视频控制器的指针指向第二个缓冲器。如此一来效率会有很大的提 升。 双缓冲虽然能解决效率问题 但会引入一个新的问题。当视频控制器还 未读取完成时，即屏幕内容刚显示一半时 GPU 将新的一帧内容提交 到帧缓冲区并把两个缓冲区进行交换后 视频控制器就会把新的一帧数 据的下半段显示到屏幕上，造成画面撕裂现象，如下图： 为了解决这个问题 GPU 通常有一个机制叫做垂直同步（简写也是 V-Sync） 当开启垂直同步后 GPU 会等待显示器的 VSync 信号发 出后，才进行新的一帧渲染和缓冲区更新。这样能解决画面撕裂现象 也增加了画面流畅度 但需要消费更多的计算资源 也会带来部分延迟。 那么目前主流的移动设备是什么情况呢？从网上查到的资料可以知道 iOS 设备会始终使用双缓存 并开启垂直同步。而安卓设备直到 4.1 版 本 Google 才开始引入这种机制 目前安卓系统是三缓存+垂直同步。 卡顿产生的原因和解决方案 在 VSync 信号到来后，系统图形服务会通过 CADisplayLink 等机制 通知 App App 主线程开始在 CPU 中计算显示内容，比如视图的创 建、布局计算、图片解码、文本绘制等。随