一、页面渲染流程
第一步、更新视图树、同步更新图层树
第二歩、CPU计算要显示的内容,包括视图的创建(设置Layer的属性)、布局计算、视图的绘制(创建Layer的Backing Image)、图像解码转换。当Runloop 在BeforeWaiting和Exit时,会通知注册的监听,然后对图层打包,打包完成后,将打包数据发给一个独立渲染的继承Render Server。
第三步、数据到达Render Server后会被反序列化,得到图层树,按照图层顺序,RGBA值、图层Frame过滤图层中被遮挡的部分,过滤后将图层转换成渲染树,渲染树的信息会转给OpenGL ES/Metal。前面CPU所处理的这些事情统称为Commit Transaction
第四步、Render Server 会调用GPU,GPU开始进行前面提到的顶点着色器、形状装配,几何着色器,光栅化,片段着色器,测试与混合六个阶段。完成这六个阶段的工作后,再将CPU和GPU计算后的数据显示在屏幕的每个像素点上。
二、CPU 和 GPU之间的协作
设备每绘制完一帧画面 ->复位时会发送一个CSync(垂直同步信号) ->切换帧缓冲区(iOS 设备是双缓存+垂直同步)->在读取经GPU渲染完成的帧缓冲区数据进行绘制的同时 ->通过CADisplayLink 等机制通知APP内部可以提交结果到另一个空闲的帧缓冲区 -> 接着CPU计算页面布局,计算完成后交有GPU渲染 ->渲染完成提交到帧缓冲区 ->当VSync再一次到来的时候,切换帧缓冲区
三、iOS 离屏渲染
GPU 屏幕渲染有两种方式:
(1)On-Screen Rendering (当前屏幕渲染)
指的是GPU的渲染操作是当前用于显示的屏幕缓冲区进行
(2)Off-Screen Rendering (离屏渲染)
指的是在GPU在当前屏幕缓冲区以外开辟一个缓冲区进行渲染操作。
当前屏幕渲染不需要额外创建新的缓存,也不需要开启新的上下文,相当于离屏渲染性能更好。但受当前屏幕渲染的局限因素限制(只有自身上下文、屏幕缓存有限等),当前屏幕渲染有些情况下解决不了的,就使用到离屏渲染。
相当于当前屏幕渲染,离屏渲染代价是很高的,主要体现在两个方面:
(1)创建新缓冲区
要想进行离屏渲染,首先要创建一个新的缓冲区。
(2)上下文切换
离屏渲染的整个过程,需要多次切换上下文环境:先是从当前屏幕切换到离屏,等到离屏结束后,将离屏缓冲区的渲染结果显示到屏幕上又需要将上下文从离屏切换到当前屏幕。上下文环境的切换是要付出很大代价
离屏渲染很耗性能,为什么需要这套机制?
有些效果认为不能直接呈现于屏幕,而需要在别的地方做额外的处理预合成。图层属性的混合体没有预合成之前不能直接在屏幕中绘制,所以就需要屏幕外渲染。屏幕外渲染并不意味着软件绘制。但是他意味着图层必须在之前在一个屏幕外上下文被渲染。
四、UIView 与CALayer 动画原理
CoreAnimation是苹果提供的一套基于绘图的动画框架
image.png
CALayer
CoreAnimation 属于QuartzCore 框架,Quartz原本是macOS的Darwin核心之上的绘图技术。在iOS中,我们所看到的视图UIView是通过QuartzCore中的CALayer显示出来的,我们讨论的动画效果也是加在这个CALayer上的。
CALayer图层类是CoreAnimation的基础,它提供了一套抽象概念。CALayer是整个图层类的基础,它是所有核心动画图层的父类
为什么UIView要加一层Layer来负责显示呢?QuartzCore是跨iOS和macOS平台的,而UIView属于UIKit是iOS开发使用的,在macOS中对应AppKit里的NSView。这是因为macOS是基于鼠标指针操作的系统,与iOS的多点触控有本质的区别。虽然iOS在交互上与macOS有所不同,但在显示层面却可以使用同一套技术。
UIView动画实现原理
UIView提供了一系列animateWithDuration:animations:,我们只需要把改变可动画属性的代码放在animations的block中即可实现动画效果
当我们layer的属性发生变化时,会调用代理方法actionForLayer: forKey:来获得这次属性变化的动画方案,而view就是它所持有的layer的代理
该方法返回一个实现了CAAction的对象,通常是一个动画对象;当返回nil时执行默认的隐式动画,返回null时不执行动画。
UIView持有一个CALayer负责展示,view是这个layer的delegate。改变view的属性实际上是在改变它持有的layer的属性,layer属性发生改变时会调用代理方法actionForLayer: forKey:来得知此次变化是否需要动画。对同一个属性叠加动画会从当前展示状态开始叠加并最终停在modelLayer的真实位置。
CALayer内部控制两个属性presentationLayer和modelLayer,modelLayer为当前layer真实的状态,presentationLayer为当前layer在屏幕上展示的状态。presentationLayer会在每次屏幕刷新时更新状态,如果有动画则根据动画获取当前状态进行绘制,动画移除后则取modelLayer的状态。
五、YYAsyncLayer 异步绘制
UIKit 替代方案:CoreAnimation 或 CoreGraphics
当然,首选优化方案是 CoreAnimation 框架。CALayer 的大部分属性都是由 GPU 绘制的 (硬件层面),不需要 CPU (软件层面) 做任何绘制。CA 框架下的 CAShapeLayer (多边形绘制)、CATextLayer(文本绘制)、CAGradientLayer (渐变绘制) 等都有较高的效率,非常实用。
再来看一下 CoreGraphics 框架,实际上它是依托于 CPU 的软件绘制。在实现CALayerDelegate 协议的 -drawLayer:inContext: 方法时(等同于UIView 二次封装的 -drawRect:方法),需要分配一个内存占用较高的上下文context,与此同时,CALayer 或者其子类需要创建一个等大的寄宿图contents。当基于 CPU 的软件绘制完成,还需要通过 IPC (进程间通信) 传递给设备显示系统。值得注意的是:当重绘时需要抹除这个上下文重新分配内存。
YYAsyncLayer 是通过创建异步创建图像Context在其绘制,最后再主线程异步添加图像 从而实现的异步绘制.同时,在绘制过程中 进行了多次进行取消判断,以免额外绘制.
参考:
https://www.jianshu.com/p/154451e4bd42
https://www.jianshu.com/p/350c2a243c72
网友评论