美文网首页
iOS中的渲染流程解析及屏幕卡顿

iOS中的渲染流程解析及屏幕卡顿

作者: 逃避不面对 | 来源:发表于2020-07-06 18:00 被阅读0次

iOS中的渲染

在iOS中渲染的整体流程如下所示

App通过调用CoreGraphics、CoreAnimation、CoreImage等框架的接口触发图形渲染操作

CoreGraphics、CoreAnimation、CoreImage等框架将渲染交由OpenGL ES,由OpenGL ES来驱动GPU做渲染,最后显示到屏幕上

由于OpenGL ES 是跨平台的,所以在他的实现中,是不能有任何窗口相关的代码,而是让各自的平台为OpenGL ES提供载体。在ios中,如果需要使用OpenGL ES,就是通过CoreAnimation提供窗口,让App可以去调用。

iOS中渲染框架总结

主要由以下六种框架,表格中已经说明了,就不再详细解释了

View 与 CALayer 的关系

首先分别简单说下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的渲染

下图可以说明view 和 layer之间是如何渲染的

界面触发的方式有两种

==> 通过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封装的方法进行画图操作

界面触发的方式有两种

==> 通过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封装的方法进行画图操作

CoreAnimation

在苹果官方的描述中,Render、Compose,and animate visual elements,CoreAnimationg中的动画只是一部分,它其实是一个复合引擎,主要的职责包括 渲染、构建和动画实现。

ios中CoreAnimation如图所示

ios中基于CoreAnimation构建的框架有两个:UIKit和APPKit

CoreAnimation 又是基于Metal 、CoreGraphics封装的

苹果为什么要基于UIView和CALayer提供两个平行的层级关系(UIKit 和APPKit)?

职责分离,可以避免大量重复代码

两个系统交互规则不一致,虽然功能上类似,但实现上有显著区别

CoreAnimation中的渲染流水线

CoreAnimation中渲染的流程如图所示

主要分为两部分:

CoreAnimation部分

GPU部分

CoreAnimation部分

App处理UIView、UIButton等载体的事件,然后通过CPU完成对显示内容的计算,并将计算后的图层进行打包,在下一次runloop时,发送到渲染服务器

Render Server中主要对收到的准备显示的内容进行解码,然后执行OpenGL等相关程序,并调用GPU进行渲染

==> Render Server 操作分析

GPU部分

GPU中通过顶点着色器、片元着色器完成对显示内容的渲染,将结果存入帧缓存区

GPU通过帧缓存区、视频控制器等相关部件,将其显示到屏幕上

屏幕卡顿

屏幕卡顿是指图形图像的在显示时出现了撕裂(即图片错位显示)、掉帧(重复显示同一帧数据)等问题,导致用户能直观的从屏幕上看到的一种异常现象

为什么会出现这种情况呢?下面就来详细解说下屏幕卡顿

屏幕卡顿的原因

主要有以下三种原因

1.CPU和GPU在渲染的流水线中耗时过长,导致从缓存区获取位图显示时,下一帧的数据还没有准备好,获取的仍是上一帧的数据,产生掉帧现象,掉帧就会导致屏幕卡顿

2.苹果官方针对屏幕撕裂问题,目前一直使用的方案是垂直同步+双缓存区,可以从根本上防止和解决屏幕撕裂,但是同时也导致了新的问题掉帧。虽然我们采用了双缓存区,但是我们并不能解决CPU和GPU处理图形图像的速度问题,导致屏幕在接收到垂直信号时,数据尚未准备好,缓存区仍是上一帧的数据,因此导致掉帧

3.在垂直同步+双缓存区的方案上,再次进行优化,将双缓存区,改为三缓存区,这样其实也并不能从根本上解决掉帧的问题,只是比双缓存区掉帧的概率小了很多,仍有掉帧的可能性,对于用户而言,可能是无感知的。

屏幕撕裂

如图所示,屏幕撕裂就类似于这样的情形

在讲屏幕撕裂之前,首先说说屏幕是如何成像的,主要的流程是什么

屏幕成像过程

请看下面这张图,详细说明了屏幕成像的一个流程

将需要显示的图像,经由GPU渲染

将渲染后的结果,存储到帧缓存区,帧缓存区中存储的格式是位图

由视屏控制器从帧缓存区中读取位图,交由显示器,从左上角逐行扫描进行显示

屏幕撕裂的原因

在屏幕显示图形图像的过程中,是不断从帧缓存区获取一帧一帧数据进行显示的,

然后在渲染的过程中,帧缓存区中仍是旧的数据,屏幕拿到旧的数据去进行显示,

在旧的数据没有读取完时 ,新的一帧数据处理好了,放入了缓存区,这时就会导致屏幕另一部分的显示是获取的线数据,从而导致屏幕上呈现图片不匹配,人物、景象等错位显示的情况。

图示如下:

苹果官方的解决方案

苹果官方针对屏幕撕裂现象,目前一直采用的是 垂直同步+双缓存,该方案是强制要求同步,且是以掉帧为代价的。

以下是垂直同步+双缓存的一个图解过程,

垂直同步:是指给帧缓冲加锁,当电子光束扫描的过程中,只有扫描完成了才会读取下一帧的数据,而不是只读取一部分

双缓冲区:采用两个帧缓冲区用途GPU处理结果的存储,当屏幕显示其中一个缓存区内容时,另一个缓冲区继续等待下一个缓冲结果,两个缓冲区依次进行交替

掉帧

采用苹果的双缓冲区方案后,又会出现新的问题,掉帧。

什么是掉帧?简单来说就是 屏幕重复显示同一帧数据的情况就是掉帧

如图所示:当前屏幕显示的是A,在收到垂直信号后,CPU和GPU处理的B还没有准备好,此时,屏幕显示的仍然是A

针对掉帧情况,我们可以在苹果方案的基础上进行优化,即采用三缓存区,意味着,在屏幕显示时,后面还准备了3个数据用于显示。

文章内容和图片引用来自:Style_月月

文章源地址

相关文章

  • iOS中的渲染流程解析及屏幕卡顿

    iOS中的渲染 在iOS中渲染的整体流程如下所示 App通过调用CoreGraphics、CoreAnimatio...

  • iOS 渲染流程和屏幕卡顿原因

    屏幕卡顿 屏幕卡顿是指图形显示到屏幕上时,出现了图像撕裂、掉帧等问题 卡顿原因 图形、图像显示到屏幕上,需要经过C...

  • 屏幕卡顿 及 iOS中OpenGL渲染架构分析

    屏幕卡顿 屏幕卡顿是指图形图像的在显示时出现了撕裂(即图片错位显示)、掉帧(重复显示同一帧数据)等问题,导致用户能...

  • OpenGL了解渲染原理

    大纲 CPU与GPU的职责和区别 计算机渲染原理 屏幕成像与卡顿 iOS下的渲染框架 View 与 CALayer...

  • iOS图像渲染流程及卡顿的原因

    今天带大家来了解一下图像的渲染原理,我想很多人在某个时间点都可能好奇过,电脑手机为什么能展示相应的图片视频,它们内...

  • OpenGL-05-屏幕卡顿原因及iOS下的渲染

    今天我们来看一下:图片撕裂、掉帧、屏幕卡顿的原因、iOS下的渲染框架、CoreAnimation的渲染流水线、UI...

  • iOS 界面流畅 - 离屏渲染

    离屏渲染往往会带来界面卡顿的问题,这里将会讨论 当前屏幕渲染、离屏渲染 以及 CPU 渲染 在 OpenGL 中,...

  • 性能优化

    面试题 CPU和GPU 屏幕成像原理 卡顿产生的原因 卡顿优化 - CPU 卡顿优化 - GPU 离屏渲染 卡顿检...

  • iOS性能优化

    屏幕呈像 iOS的屏幕成像中,CPU,GPU起着关键作用,屏幕的卡顿与CPU对数据的计算,GPU的渲染,屏幕的刷新...

  • Flutter 究竟是如何渲染的?

    之前,写了一篇《iOS 浅谈GPU及“App渲染流程”》阐述了iOS端App的渲染流程。其中包括三种渲染方式,分别...

网友评论

      本文标题:iOS中的渲染流程解析及屏幕卡顿

      本文链接:https://www.haomeiwen.com/subject/qglwqktx.html