大纲
- CPU与GPU的职责和区别
- 计算机渲染原理
- 屏幕成像与卡顿
- iOS下的渲染框架
- View 与 CALayer 的关系
- CoreAnimation渲染
CPU与GPU的职责和区别
CPU
- 运算核心、控制核心，资源调配，处理逻辑复杂的内容，相当于指挥者，依赖性高
- 架构：计算单元、控制单元、高级缓存
不是真正的并发，是时间片的快速切换
GPU
- 绘图运算的微处理器，GSLS语法，简单，不擅长处理逻辑复杂，跳转复杂，擅长单一，并行处理，类似于小工人，有很多的计算单元，真正的高并发，依赖性非常低的任务
- 架构：很多的计算单元，实现高并发，快速处理图像、视频计算
计算机渲染原理
计算机显示演变：
- 随机扫描显示：时间复杂度与图片复杂度成正比
- 光栅扫描显示：屏幕左上方，向右向后逐行横向扫描,和图像复杂度无关
渲染系统：
显示器（内容来自帧缓存区）
视频控制器（控制刷新的部件，负责帧缓存区与显示器的对应关系，进行显示绘制）
帧缓存区（双缓存、三缓存等） 帧缓存、显存（显示内存）
显存：存储处理后的渲染数据或即将显示的渲染数据
视觉暂留：一秒16帧，就会认为是连贯的，60帧是高清画质
渲染流程
- 系统总线把图片数据提交给CPU解码，CPU解码完拷贝一份解码数据给显示处理器，放在显示处理器存储器（显存）的帧缓存区，帧缓存区存放的是即将显示的渲染数据，显示控制器根据垂直同步Vsyn信号向帧缓存区获取渲染数据，然后提交给显示器显示
屏幕成像与卡顿
屏幕撕裂
- 显示控制器向帧缓存区获取渲染数据，从屏幕左上方，向右向后逐行横向扫描，然后提交给显示器，进行显示，当上一帧的渲染数据获取到了一半，帧缓存区完成新的渲染数据，显示控制器在帧缓存区获取到后半段的数据就是新的渲染数据，前一半是旧的渲染数据，后半段是新的渲染数据，最后提交给显示器显示，就会造成屏幕撕裂
如何防止屏幕撕裂？
垂直同步Vsync+双缓存：，垂直同步相当于加了一个锁，只有当当前渲染数据渲染完毕，才会继续渲染下一个新的渲染数据，防止屏幕撕裂，是以屏幕掉帧、卡顿为代价
三缓存区：合理使用CPU与GPU，减少掉帧的次数
什么是掉帧/卡顿？简单来说就是 屏幕重复显示同一帧数据的情况就是掉帧
如下图所示：当前屏幕显示的是A，显示控制器在收到垂直信号Vsync后，从帧缓存区获取渲染数据，由于CPU和GPU处理的B还没有准备好，帧缓存区的内容还是A，在帧缓存区拿到的还是A，所以最终，屏幕显示的仍然是A
View 与 CALayer 的关系
参考自作者Style_月月
首先分别简单说下UIView和CALayer各自的作用
UIView
- UIView属于UIKIt
- 负责绘制图形和动画操作
- 用于界面布局和子视图的管理
- 处理用户的点击事件
CALayer
- CALayer属于CoreAnimation
- 只负责显示，且显示的是位图
- CALayer既用于UIKit，也用于APPKit
UIKit是iOS平台的渲染框架，APPKit是Mac OSX系统下的渲染框架，
由于iOS和Mac两个系统的界面布局并不是一致的，iOS是基于多点触控的交互方式，而Mac OSX是基于鼠标键盘的交互方式，且分别在对应的框架中做了布局的操作，所以并不需要layer载体去布局，且不用迎合任何布局方式。
【面试题】UIView和CALayer的关系
- UIView基于UIKit框架，可以处理用户触摸事件，并管理子视图
- CALayer基于CoreAnimation，而CoreAnimation是基于QuartzCode的。所以CALayer只负责显示，不能处理用户的触摸事件
- 从父类来说，CALayer继承的是NSObject，而UIView是直接继承自UIResponder的，所以UIVIew相比CALayer而言，只是多了事件处理功能，
- 从底层来说，UIView属于UIKit的组件，而UIKit的组件到最后都会被分解成layer，存储到图层树中
- 在应用层面来说，需要与用户交互时，使用UIView，不需要交互时，使用两者都可以
UIView和CALayer的渲染
界面触发的方式有两种
- 通过loadView中子View的drawRect方法触发：会回调CoreAnimation中监听Runloop的BeforeWaiting的
RunloopObserver，通过RunloopObserver来进一步调用CoreAnimation内部的CA::Transaction::commit()，进而一步步走到drawRect方法 - 用户点击事件触发：唤醒Runloop，由source1处理
(__IOHIDEventSystemClientQueueCallback)，并且在下一个runloop里由source0转发给UIApplication(_UIApplicationHandleEventQueue)，从而能通过source0里的事件队列来调用CoreAnimation内部的CA::Transaction::commit();方法，进而一步一步的调用drawRect。
最终都会走到CoreAnimation中的CA::Transaction::commit()方法，从而来触发UIView和CALayer的渲染
这时，已经到了CoreAnimation的内部，即调用CA::Transaction::commit();来创建CATrasaction，然后进一步调用 CALayer drawInContext:()
回调CALayer的Delegate(UIView)，问UIView没有需要画的内容，即回调到drawRect:方法
在drawRect:方法里可以通过CoreGraphics函数或UIKit中对CoreGraphics封装的方法进行画图操作
将绘制好的位图交由CALayer，由OpenGL ES 传送到GPU的帧缓冲区
等屏幕接收到垂直信号后，就读取帧缓冲区的数据，显示到屏幕上
iOS下的渲染框架
- CoreGraphics
- CoreAnimation
- CoreImage
不论是CoreGraphics、CoreAnimation还是CoreImage，最终都是通过OpenGL ES或者OpenGL Metal驱动GPU进行干活渲染绘制
CoreAnimation渲染
CoreAnimation过程：
- Application处理Handle Event各种事件
- Commit Transaction提交事务给Render Server渲染服务
- Render Server进行解码，在下一个RunLoop到来的时候进行绘制
OpenGL
- 绘制提交给OpenGL来处理
- 通过OpenGL驱动GPU干活
- GPU拿到顶点数据传给顶点着色器
- 顶点着色器后进行图元装配
- 图元装配完进行光栅化
- 光栅化获取到像素范围，把颜色附着到像素点上去
- 然后把数据传给片元着色器
- 最后进行屏幕显示
