iOS 关于离屏渲染

离屏渲染

计算机绘图使用油画算法，按图层逐层绘制，由远及近，逐层覆盖；如下图。

painter-draw.png

对于有前后依赖的图层（如全局剪切，阴影等），无法同时绘制多层图像，所以会造成离屏渲染。对于有前后依赖的图层，需要另开辟一个空间，用于临时渲染，渲染完成后再渲染到当前的缓冲区上，这个临时渲染，就是离屏渲染，由于需要开辟一个新的内存空间，并且共享同一个上下文，所以还需要做上下文切换（状态切换），并且渲染完成后还要进行拷贝操作

开辟临时缓存空间
上下文切换，上下文对象比较大，切换操作会带来一定的性能消耗
内存拷贝
额外的渲染（没有进一步考证）

上面4项带来的开销会很大，并且每一帧渲染都需要执行，如果屏幕上触发离屏渲染的操作过多，会导致GPU渲染时间过长造成卡顿，应该避免触发离屏渲染

关于圆角问题

官方文档关于layer.cornerRadius的描述

Setting the radius to a value greater than 0.0 causes the layer to begin drawing rounded corners on its background. By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.

简单的说，设置layer.cornerRadius只会作用到layer的background color和 border上面，不会作用到layer.contents上面，但是如果设置layer.masksToBounds = true，那么就会裁切contents成圆角。

离屏渲染是GPU无法按油画算法一次性渲染完我们的视图才会触发。我们先来看几个iOS的例子，选中模拟器 --> debug --> 打开Color Off-screen Rendered。

// 1、imageView
let imageV = UIImageView(frame: CGRect(x: 0, y: 120, width: 375, height: 80))
view.addSubview(imageV)
imageV.image = UIImage(named: "imageName")
        
// image + cornerRadius + masksToBounds 不会触发离屏渲染，因为此时没有前后依赖的图层
imageV.layer.cornerRadius = 20
imageV.layer.masksToBounds = true
        
// 设置圆角后，再设置borderWidth会导致离屏渲染
// imageV.layer.borderColor = UIColor.blue.cgColor
// imageV.layer.borderWidth = 3
        
// 如果只设置阴影，不设置shadowPath，会导致离屏渲染，因为不知道阴影到底怎么绘制
// 如果设置了shadowPath属性，那么知道了阴影绘制范围，那么就不会造成离屏渲染
// 阴影不能和masksToBounds同时存在，会被裁切
imageV.layer.shadowColor = UIColor.green.cgColor
imageV.layer.shadowOffset = CGSize(width: 2, height: 6)
imageV.layer.shadowOpacity = 1
let path = CGMutablePath()
path.addRoundedRect(in: imageV.bounds, cornerWidth: 20, cornerHeight: 20)
imageV.layer.shadowPath = path
   
// 包含多图层的View，同时赋值，会触发离屏渲染，image + backgroundColor + cornerRadius + masksToBounds，会触发离屏渲染
// backgroundColor会占一层
// imageV.backgroundColor = UIColor.green

// 如果添加一个frame != CGRect.zero 的view，会造成前后图层依赖，导致离屏渲染
// let subView = UIView(frame: CGRect(x: 20, y: 20, width: 100, height: 30))
// subView.backgroundColor = UIColor.white
// imageV.addSubview(subView)

// 2. UIButton
let button = UIButton(frame: CGRect(x: 50, y: 250, width: 300, height: 50))
view.addSubview(button)
button.setTitle("Test", for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 20)
button.setTitleColor(.blue, for: .normal)
// 设置button.imageView的圆角，不会触发离屏渲染
// button.setImage(UIImage(named: "imageName"), for: .normal)
// button.imageView?.layer.cornerRadius = 20
// button.imageView?.layer.masksToBounds = true

// 设置圆角
button.layer.cornerRadius = 20
button.layer.masksToBounds = true

//  再设置背景颜色，会触发离屏渲染
button.backgroundColor = .green
        
// 3、UIView
let newView = UIView(frame: CGRect(x: 50, y: 400, width: 300, height: 50))
view.addSubview(newView)
newView.backgroundColor = UIColor.green
newView.layer.cornerRadius = 20
// 开启masksToBounds，如果有子视图，并且子视图被渲染（frame，alpha不为0），那么会造成离屏渲染
// newView.layer.masksToBounds = true

// 子视图label如果被渲染，则会触发渲染，如果text为空不会被渲染
let label = UILabel(frame: CGRect(x: 30, y: 10, width: 50, height: 20))
label.textColor = .white
newView.addSubview(label)
// 无内容不会造成离屏渲染，当然如果不开启masksToBounds = true,即使有内容也不会离屏渲染
label.text = "11" // label.text = "" 不会渲染
label.alpha = 0.8
        
// 如果视图有子视图，那么设置alpha<1.0，会导致离屏
// newView.alpha = 1
        
// 栅格化为true，会导致离屏
// newView.layer.shouldRasterize = true
        
// 设置shadow,并且设置shadowPath,则系统知道如何绘制阴影，不会触发离屏渲染
// newView.layer.shadowColor = UIColor.red.cgColor
// newView.layer.shadowOffset = CGSize(width: 2, height: 6)
// newView.layer.shadowOpacity = 1
// let newpath = CGMutablePath()
// newpath.addRoundedRect(in: newView.bounds, cornerWidth: 20, cornerHeight: 20)
// newView.layer.shadowPath = newpath
        
// 设置遮罩 会导致offScreen Render (layer.mask)
// let shapLayer = CAShapeLayer()
// let bePath = UIBezierPath(roundedRect: newView.bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: 20, height: 20))
// shapLayer.path = bePath.cgPath
// newView.layer.mask = shapLayer

总结

cornerRadius + masksToBounds 如果不会造成前后图层依赖，则不会造成离屏渲染。imageView不设置backgroundColor，或者UIView设置backgroundColor后，无可渲染的子视图，也不会造成离屏渲染。UIView如果确定子视图不会被裁切，那么不设置masksToBounds时，也不会造成离屏渲染。
设置遮罩（layer.mask），肯定会导致离屏渲染。
cornerRadius + masksToBounds + 被渲染的子图层，会导致离屏
cornerRadius + masksToBounds + layer.borderWidth > 0，会导致离屏
栅格化layer.shouldRasterize = true，会导致离屏。
设置shadow，且不设置shadowPath，会导致离屏渲染。
设置组透明度为 true，并且透明度不为 1 的layer (layer.allowsGroupOpacity / layer.opacity)
毛玻璃效果

转载自 http://zhengbomo.github.io/2020-07-14/ios-offscreen-render/