iOS 页面渲染相关知识点

一、页面渲染流程
第一步、更新视图树、同步更新图层树
第二歩、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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335