学习笔记--离屏渲染

离屏渲染的定义

要在显示屏上显示内容，需要一块像素数据存储区域frame buffer，而这也是GPU存储渲染结果的地方。如果有时因为面临一些限制，无法把渲染结果直接写入frame buffer，而是先暂存在另外的内存区域，之后再写入frame buffer，那么这个过程被称之为离屏渲染。

离屏渲染的原因

cornerRadius+clipsToBounds，容器的子layer因为父容器有圆角，那么也会需要被裁剪，而这时它们还在渲染队列中排队，尚未被组合到一块画布上，自然也无法统一裁剪，不得已只能另开一块内存来操作。而如果只是设置cornerRadius，并不会触发离屏渲染。

shadow，其原因在于需要显示在所有layer内容的下方，因此必须被渲染在先。但此时阴影的本体（layer和其子layer）都还没有被组合到一起，只能另外申请一块内存，把本体内容都先画好，再根据渲染结果的形状，添加阴影到frame buffer，最后把内容画上去。

group opacity，产生离屏渲染的条件是layer.opacity != 1.0并且有子 layer 或者背景图。alpha并不是分别应用在每一层之上，而是只有到整个layer树画完之后，再统一加上alpha，最后和底下其他layer的像素进行组合。显然也无法通过一次遍历就得到最终结果。

mask，mask是应用在layer和其所有子layer的组合之上的，而且可能带有透明度，那么其实和group opacity的原理类似，不得不在离屏渲染中完成。

UIBlurEffect，同样无法通过一次遍历完成。 其他还有一些，类似allowsEdgeAntialiasing等等也可能会触发离屏渲染，原理也都是类似：如果你无法仅仅使用frame buffer来画出最终结果，那就只能另开一块内存空间来储存中间结果。

离屏渲染如何影响性能的

GPU的操作是高度流水线化的。本来所有计算工作都在有条不紊地正在向frame buffer输出，此时突然收到指令，需要输出到另一块内存，那么流水线中正在进行的一切都不得不被丢弃，切换到只能服务于我们当前的“切圆角”操作。等到完成以后再次清空，再回到向frame buffer输出的正常流程。

在tableView或者collectionView中，滚动的每一帧变化都会触发每个cell的重新绘制，因此一旦存在离屏渲染，上面提到的上下文切换就会每秒发生60次，并且很可能每一帧有几十张的图片要求这么做，对于GPU的性能冲击可想而知（GPU非常擅长大规模并行计算，但是我想频繁的上下文切换显然不在其设计考量之中）

优化思路：既然已经花了不少精力把图片裁出了圆角，如果我能把结果缓存下来，那么下一帧渲染就可以复用这个成果，不需要再重新画一遍了。 CALayer为这个方案提供了对应的解法：shouldRasterize。一旦被设置为true，Render Server就会强制把layer的渲染结果（包括其子layer，以及圆角、阴影、group opacity等等）保存在一块内存中，这样一来在下一帧仍然可以被复用，而不会再次触发离屏渲染。

有几个需要注意的点： shouldRasterize的主旨在于降低性能损失，但总是至少会触发一次离屏渲染。 一旦缓存超过100ms没有被使用，会自动被丢弃 layer的内容（包括子layer）必须是静态的，因为一旦发生变化（如resize，动画），之前辛苦处理得到的缓存就失效了。 shouldRasterize在另一个场景中也可以使用：如果layer的子结构非常复杂，渲染一次所需时间较长，同样可以打开这个开关，把layer绘制到一块缓存，然后在接下来复用这个结果，这样就不需要每次都重新绘制整个layer树了

CPU渲染

如果重写了drawRect方法，并且使用任何Core Graphics 的技术进行了绘制操作，就涉及到CPU渲染。整个渲染过程由CPU在App内同步完成，渲染得到的bitmap(位图)最后再交由GPU用于显示。 绝大多数情况下，得益于GPU针对图形处理的优化，我们都会倾向于让GPU来完成渲染任务，而给CPU留出足够时间处理各种各样复杂的App逻辑。 对于一些情况，如文字（CoreText使用CoreGraphics渲染）和图片（ImageIO）渲染，由于GPU并不擅长做这些工作，不得不先由CPU来处理好以后，再把结果作为texture传给GPU。除此以外，有时候也会遇到GPU实在忙不过来的情况，而CPU相对空闲（GPU瓶颈），这时可以让CPU分担一部分工作，提高整体效率。

优化方案

1.应用AsyncDisplayKit(Texture)作为主要渲染框架，对于文字和图片的异步渲染操作交由框架来处理 2.对于图片的圆角，统一采用“precomposite”的策略，也就是不经由容器来做剪切，而是预先使用CoreGraphics为图片裁剪圆角 3.对于视频的圆角，由于实时剪切非常消耗性能，可用四个白色弧形的layer盖住四个角，从视觉上制造圆角的效果。 4.对于所有的阴影，使用shadowPath来规避离屏渲染。 5.对于特殊形状的view，使用layer mask并打开shouldRasterize来对渲染结果进行缓存。 6.对于模糊效果，不采用系统提供的UIVisualEffect，而是另外实现模糊效果（CIGaussianBlur），并手动管理渲染结果。

参考文献：https://zhuanlan.zhihu.com/p/72653360 （如有侵权请告知删除）