iOS面试题（四） UI视图 -图像显示原理&滑动优化&离屏渲染-GPU层面

二、UI视图

UITableView相关（重用机制的理解和运用方面，包括我们在UITableView的使用过程中，会涉及到对数据源的一个多线程的操作，这里面就涉及到了一个数据源同步的问题）

事件响应&视图响应

图像显示原理（UI视图的图像显示原理是怎样的？我们创建了一个控件，最后是如何转化到屏幕上的每一个像素点的呢？）

UI卡顿、掉帧的原因

UI绘制原理/异步绘制原理

离屏渲染

图像显示原理：（为UI卡顿、掉帧的原因做技术铺垫）

 

1. 关于CPU和GPU两个硬件都是通过总线连接起来的，我们在CPU输出的结果往往是一个位图，再经由总线在合适的时期上传给GPU。
2. GPU拿到位图以后会做相应位图的图层渲染，包括纹理合成。
3. 之后把结果放到帧缓冲区Frame Buffer中
4. 由视频控制器根据VSync信号在指定时间之前,去提取帧缓冲区中屏幕显示内容
5. 最终显示到显示器上

在上面这一过程中，CPU和GPU分别做了什么？

1. 首先当我们创建一个UIView控件之后呢，UIView的显示是CALayer负责。
2. CALayer有个contents属性,就是最终要绘制到屏幕上的位图。
3. 假如绘制的是label,那么contents里最终放置的就是hello world文字的位图。
4. 系统会在合适的时机回调给我们drawRect方法,我们可以在此的基础之上,去绘制一些自定义想要绘制的内容。
5. 绘制好的位图，最终会经由Core Animation这个框架,提交给GPU部分的OpenGL渲染管线
6. 进行位图的最终渲染,包括纹理合成,然后显示到屏幕上面。

CPU的工作

CPU需要完成UI的布局（layout）,包括显示或者说绘制(Display),之后做一些准备工作(PrePare),然后把对应的位图提交到GPU上面(Commit)
layout:UI布局和文本计算包括控件Frame的设置,对于控件的文字或者size的计算
Display:就是绘制过程,drawRect方法发生在这一步骤
PrePare:准备阶段,假如有UIImageView,那么设置它的image的时候,图片是不能直接显示到屏幕上去的,需要对图片进行解码,解码的动作就发生在这一过程当中
Commit:对CPU最终的输出结果位图进行提交

GPU渲染管线过程（为UI卡顿、掉帧的原因做技术铺垫）

GPU渲染管线指的是OpenGL的渲染管线
首先顶点着色,指的是对位图进行处理
做完上面渲染管线的五个步骤之后,会把最终的像素点提交到对应的帧缓冲区（FrameBuffer）中,由视频控制器在Vsync信号到来之前,去帧缓冲区中提取最终要显示到屏幕上的内容,最终显示到显示器上。
 

UI卡顿、掉帧的原因

上面是VSync垂直信号

• 我们一般说的页面滑动的流畅性是60fps,指的是每一秒会有60帧的画面更新,那么人眼看到的就是流畅的效果。基于此,相当于每隔16.7毫秒(60分之1)就要产生一帧画面,在16.7ms之内,需要CPU和GPU共同协同完成最终的一帧的数据.
• 灰方块表示CPU花费一定的时间进行文本的布局,UI计算,视图的绘制,图片解码等
• 然后把位图提交给GPU,GPU进行图层的合成,纹理渲染,准备好要显示的画面,那么在下一次VSync信号到来时,就可以显示准备好的这一帧画面了

假如CPU做工作时时长特别长的时候,留给GPU的时间就比较少了,等GPU将工作做完,总时长就超出16.7了,在下一帧VSync信号到来的时候,没有准备好当下这一帧的画面,就产生了掉帧,那么我们肉眼看到的效果就是滑动的卡顿

所以,掉帧的原因是:在规定的16.7ms内,在下一帧VSync信号到来之前,CPU和GPU并没有完成下一帧画面的合成,于是导致了卡顿掉帧。
基于这个掉帧原因,我们可以分析如何提高Tableview等控件的滑动流畅性优化的方案
 

滑动优化方案

基于CPU:文本的布局,UI计算,视图的绘制,图片解码等

1. 在子线程中进行对象的创建,调整和销毁，节省一部分CPU的时间
2. 在子线程中预排版(布局计算,文本计算)，让主线程有更多的时间去响应用户的交互
3. 预渲染(文本等异步绘制,图片编解码等)

GPU:(图层的合成,纹理渲染等)

纹理渲染方面的优化:
假如我们触发了离屏渲染,就会产生一些layer的圆角,masksToBounds的设置,阴影蒙层,这些都会触发GPU层面的离屏渲染,这种情况下,GPU做纹理渲染的工作量就会很大.优化就是尽量避免离屏渲染,还可以依托CPU的异步绘制机制来减轻GPU的压力

视图混合方面的优化:
若视图层级复杂,GPU就要做每一个视图的合成,合成每个像素点对应的像素值,需要做大量的计算,可以减轻视图层级复杂性,就能减轻GPU的压力,也可以通过CPU层面的异步绘制机制,来达到提交的位图本身就是一个层级少的视图,这样也可以减轻GPU的压力

离屏渲染-GPU层面

On-Screen Rendering:
意为在屏渲染（当前屏幕渲染），指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行
Off-Screen Rendering:
意为离屏渲染，指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作

什么是离屏渲染:当我们设置某一些UI视图的图层属性,标记为它在未预合成之前,不能用于当前屏幕上面直接显示的时候,就会触发离屏渲染。离屏渲染的概念，起源于GPU层面，指的是在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

什么场景下会触发离屏渲染

1. 设置视图的圆角属性(必须同时maskToBounds为YES才会触发)
2. 设置视图的图层蒙版
3. 设置阴影
4. 设置光栅化

为何要避免离屏渲染

1. 离屏渲染是发生在GPU层面上的,离屏渲染使GPU层面上面触发了OpenGL的多通道渲染管线,产生了额外的开销,所以我们要避免离屏渲染
2. 离屏渲染会创建新的渲染缓冲区,会有内存上的开销。包括对上下文的切换(因为有多通道的渲染管线,所以会需要把多通道的渲染结果做渲染合成,就涉及到了上下文切换),就会有GPU的额外开销
3. 触发离屏渲染时,会增加GPU的工作量,很可能导致CPU和GPU的总耗时加起来超过了16.7ms,就会导致UI的卡顿和掉帧,所以需要避免离屏渲染