美文网首页
离屏渲染

离屏渲染

作者: 枫林风雨 | 来源:发表于2019-05-26 15:00 被阅读0次
    图像显示原理

    显示器显示出来的图像是经过CRT电子枪一行一行的扫描,扫描出来就呈现了一帧画面,随后电子枪又会回到初始位置循环扫描。为了让显示器的显示跟视频控制器同步,当电子枪新扫描一行的时候,会发送一个水平同步信号(HSync信号)。显示器一般是固定刷新频率的,这个刷新的频率其实就是行同步信号产生的频率。然后CPU计算好帧等属性,就将计算好的内容提交给GPU去渲染,GPU渲染完成之后就会放入帧缓冲区,然后视频控制器会按照行同步信号逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器。就显示出来了。

    iOS设备通常是60fps(每秒60帧),也就是说两帧相隔的时间是1/60秒,大概16.7ms。在这16.7ms中,为了显示一帧,需要如下工作:

    • CPU计算好各个视图的位置,大小,对图片进行解码等,绘制成纹理交给GPU
    • GPU对收到的纹理进行混合,顶点变换,渲染到帧缓冲区
    • 每16.7ms,一个时钟信号到达,帧缓冲区取出一帧,显示到屏幕。
    基础概念

    渲染通常分为CPU和GPU渲染两种,而GPU渲染又分为在GPU缓冲区和非缓冲区两种:

    • CPU渲染(软件渲染),CPU绘制成bitmap,交给GPU
    • GPU渲染(硬件渲染)
    • 屏幕渲染(GPU缓冲区渲染),指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区进行。
    • 离屏渲染(非GPU缓冲区渲染),指的是在GPU在当前屏幕缓冲区以外开辟一个缓冲区进行渲染操作。

    离屏渲染的代价很高,想要进行离屏渲染,首选要创建一个新的缓冲区,屏幕渲染会有一个上下文环境的一个概念,离屏渲染的整个过程需要切换上下文环境,先从当前显示幕切换到离屏,等结束后,又要将上下文环境切换回来。这也是为什么会消耗性能的原因了。
    由于垂直同步的机制,如果在一个HSync时间内,CPU或GPU没有完成内容提交,则那一帧就会被丢弃,等待下一次机会再显示,而这时显示屏会保留之前的内容不变。也就是说,CPU或者GPU被大量占用的时候,都有可能在16.7ms中没办法完成一帧的绘制,导致时钟信号到来的时候,取得还是上一帧的内容。这就是界面卡顿的原因。

    为什么离屏渲染这么耗性能,为什么有这套机制呢?

    比如当使用圆角,阴影,遮罩的时候,图层属性的混合体被指定为在未预合成之前(下一个HSync信号开始前)不能直接在屏幕中绘制,所以就需要屏幕外渲染。
    离屏渲染也不是一定会引起性能问题,而且是很少会,比如drawRect这个方法,只会在时图进行重新绘制的时候才会调用。也就是说,假如你的View并不会频繁重绘,那么即使实现了drawRect,也没什么关系。

    哪些操作会触发离屏渲染?

    包括:
    Layer具有Mask(遮罩),比如圆角、Shadow、渐变
    group opacity(不透明)
    edge antialiasing(边缘抗锯齿)
    Layer的光栅化shouldRasterize为True
    用CoreGraphics的CGContext绘制的
    在drawRect中绘制的,即使drawRect是空的
    文本(UILabel,UITextfield,UITextView,CoreText,UITextLayer等)

    ??测试发现倒角和文本并没有触发离屏渲染
    是iOS系统做了优化?还是手机硬件性能提升?

    概念介绍

    光栅化:将图转化为一个个栅格组成的图像。
    光栅化特点:每个元素对应帧缓冲区中的一像素。
    shouldRasterize = YES在其它属性触发离屏渲染的同时,会将光栅化后的内容缓存起来,如果对应的layer或者sublayers没有发生改变,在下一帧的时候可以直接复用,从而减少渲染的频率。
    当使用光栅化是,可以开启“Color Hits Green and Misses Red”来检查该场景下是否适合选择光栅化,绿色表示缓存被复用,红色表示缓存在被重复创建。对于经常变动的内容,不要开启,否则会造成性能的浪费。

    彩色混合层
    屏幕上的每个像素点的颜色是由当前像素点上的多层层(如果存在)共同决定的,GPU会进行计算出混合颜色的RGB值,最终显示在屏幕上。而这需要让GPU计算,所以我们要尽量避免设置alpha,这样GPU会忽略下面所有的layer,节约计算量。再提一下opaque这个属性,网上普遍认为view.opaque = YES,GPU就不会进行图层混合计算了。这个结论是错误的,其实view.opaque事实上并没什么卵用。
    如果你真的想达到这个效果,可以用layer.opaque,这个才是正确的做法

    相关文章

      网友评论

          本文标题:离屏渲染

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