在介绍离屏渲染之前,我们先简单描述一下图形渲染。
图形渲染
我们都知道现在的计算机除了有cpu外,还有一个GPU芯片。那么这两个芯片的作用是啥?
CPU:现在计算机整个系统的运算核心、控制核心。
GPU:可进行绘图运算工作的专用微处理器,是连接计算和显示终端的纽带;GPU主要是用来处理图像信息的功能,被称为图形处理器。
屏幕成像的方式有很多种类型:
1、随机扫描显示:通过光束扫描图像信息。
2、光栅扫描显示:
简单光栅扫描显示系统结构:
常用光栅扫描显示系统结构
高级光栅扫描显示系统结构
3、屏幕扫描
图像显示大致过程:CPU/GPU处理->存放到帧缓冲区->视频控制器去帧缓冲区读取->其他一系列处理->显示器展示(光栅扫描)
有时候会出现屏幕撕裂的情况,那是由于下一帧的图像渲染没有完成,扫描的还是上一帧的图像数据,因此会发生屏幕撕裂的情况。
图像渲染流程:
着色器渲染流程:
在渲染过程中,必须是2种着色器,分别是顶点着色器、片元着色器。顶点着色器是第一个着色器,片元着色器是最后一个。顶点着色器处理顶点数据,片元着色器处理像素点颜色。类似于渲染一个正方形,四个顶点由顶点着色器处理,其余的内容分成很多个像素点,由片元着色器处理。
ios下的渲染框架
ios下的CoreAnimation:本质上可以理解为一个复合引擎,主要职责包含:渲染、构建和实现动画。
CoreAnimation渲染流水线:
离屏渲染(Offscreen rendering)探索
如何检测项目中哪些图层触发了离屏渲染问题:
ng)
离屏渲染定义:
在通常情况下,我们在屏幕上显示都是读取帧缓冲区(Frame Buffer)渲染好的的数据,然后显示在屏幕上;而离屏渲染,则是将渲染好的图像放入离屏缓冲区(OffScreen Buffer)等多个图层的数据渲染完,再组合在一起,放入帧缓冲区,然后在屏幕上显示。
离屏渲染的存在的问题:
1、offScreenBuffer空间大小有限制,为屏幕像素点的2.5倍。
2、容易掉帧,产生性能问题。
3、渲染需要时间,会产生性能问题。
离屏渲染触发的几种情况:
1、使用了mask的layer。
2、需要进行裁剪的layer
3、设置了组透明为yes,并且透明度不为1的layer。
4、添加了投影的layer
5、采用了shouldRasterize光栅化
6、绘制了文字的layer
其中,列出一些shouldRasterize光栅化的使用建议:
1、如果layer不能被复用,则没必要打开;
2、如果layer不是静态的,需要被频繁修改,比如处于动画之中,那么开启离屏渲染反而影响效率了。
3、离屏渲染缓存内容有时间限制,缓存内容100ms内容入锅没有被使用,那么它就会丢弃;无法进行复用了。
4、离屏渲染缓存空间有限,超过2.5倍屏幕像素大小的话,也会失效,且无法进行复用了。
那么我们怎么判断离屏渲染是否会触发呢?
我们来探索一下:
//1.按钮存在背景图片
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(100, 30, 100, 100);
btn1.layer.cornerRadius = 50;
[self.view addSubview:btn1];
[btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];
btn1.clipsToBounds = YES;
//2.按钮不存在背景图片
UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
btn2.frame = CGRectMake(100, 180, 100, 100);
btn2.layer.cornerRadius = 50;
btn2.backgroundColor = [UIColor blueColor];
[self.view addSubview:btn2];
btn2.clipsToBounds = YES;
//3.UIImageView 设置了图片+背景色;
UIImageView *img1 = [[UIImageView alloc]init];
img1.frame = CGRectMake(100, 320, 100, 100);
img1.backgroundColor = [UIColor blueColor];
[self.view addSubview:img1];
img1.layer.cornerRadius = 50;
img1.layer.masksToBounds = YES;
img1.image = [UIImage imageNamed:@"btn.png"];
//4.UIImageView 只设置了图片,无背景色;
UIImageView *img2 = [[UIImageView alloc]init];
img2.frame = CGRectMake(100, 480, 100, 100);
[self.view addSubview:img2];
img2.layer.cornerRadius = 50;
img2.layer.masksToBounds = YES;
img2.image = [UIImage imageNamed:@"btn.png"];
在上面的代码中,创建了两个button,两个imageView,那么为什么1,3会触发离屏渲染,2,4却不会触发离屏渲染呢?
我们分析一下代码:
在两个button按钮当中,第一个与第二个的区别在于一个设置了图片,一个设置了背景颜色,然后共同设置了圆角,mask。从这个结果可以看出,离屏渲染触发的条件就是存在多组不同的layer需要渲染在一个视图上,而GPU无法一次性全部渲染时,才会触发。
在两个imageView中,同样的设置了圆角,mask,图片,和一个有背景色,一个无背景色。有背景颜色的触发了离屏渲染,没有的没触发。
我的理解是:img1中,有背景颜色,图片,圆角,需要将背景颜色,图片都进行裁剪,存在多层图像的加载,因此就会触发离屏渲染。在img2中,只有图片需要裁剪,只存在单层内容需要加载,因此不会触发离屏渲染。
你或许会有疑问?为啥UIButton也只是设置图片,圆角,mask,为什么它就可以触发离屏渲染?其实在UIButton中会有一个UIImageView属性,对UIButton裁剪,则会触发离屏渲染。
注意事项:给图层设置layer.cornerRadius只会设置backgroundColor和border的圆角,不会设置content的圆角,除非你同时设置了layer.masksToBounds为YES,才会对content设置圆角属性。
离屏渲染原理:
在我们渲染一组layer时,若不使用离屏渲染,则会出现第一个layer渲染完后,存入帧缓冲区,然后显示在屏幕上,到第二个layer渲染完后,存入帧缓冲区,再显示再屏幕上,第一个layer就会消失,从而出现问题。
那么使用离屏渲染,系统会将每个layer渲染完的结果存放到离屏缓冲区(OffScreen Buffer),最后将这些layer存入帧缓冲区,进而显示到屏幕上,这样就能完整的显示整个图像。