原理网上能搜到很多，本文只讲实践
测试环境：
- Xcode 10.0
- Swift 4.2
- iPhone 7模拟器, iOS 12.0
- 真机 iPhone 6, iOS 10.3.3
- Demo
首先普及一下CALayer的层次结构
CALayer由背景色backgroundColor、内容contents、边缘borderWidth&borderColor构成。下面图片是从别人文章里拿过来的，很直观形象的说明了CALayer的组成部分
CALayer组成部分
离屏渲染的检测手段
-
联机调试时
image.png -
模拟器的 debug -> 选取 color Offscreen-Rendered
模拟器-->debug
以下离屏渲染的优化
1. shadow (阴影)
常用阴影方法：
let shadowView = UIView()
shadowView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
shadowView.layer.backgroundColor = UIColor.green.cgColor
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 10
shadowView.layer.shadowOffset = CGSize(width: 10, height: 10)
view.addSubview(shadowView)
效果图，黄色部分产生的离屏渲染：
阴影效果产生的离屏渲染
优化方法：设置阴影后，设置CALayer的 shadowPath
let shadowView = UIView()
shadowView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
shadowView.layer.backgroundColor = UIColor.green.cgColor
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOpacity = 0.5
shadowView.layer.shadowRadius = 10
shadowView.layer.shadowOffset = CGSize(width: 10, height: 10)
shadowView.layer.shadowPath = UIBezierPath(rect: shadowView.bounds).cgPath
view.addSubview(shadowView)
优化后效果图：
优化后的阴影部分没有离屏渲染
2. 圆角
分别讲了UIView, UILable, UIImageView, UIButton设置圆角
2.1 UIView
UIView设置圆角不会产生离屏渲染
let cornerView = UIView()
cornerView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
cornerView.backgroundColor = .red
cornerView.layer.cornerRadius = 20
view.addSubview(cornerView)
2.2 UILabel
如下图，饿了么-次日达 用UILabel实现
饿了么
用以下实现则会产生离屏渲染：
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.layer.masksToBounds = true
view.addSubview(label)
圆角处有黄色说明产生的离屏渲染
image.png
网上很多文章都说到masksToBounds = true 产生了离屏渲染。
这个例子中去掉masksToBounds = true能达到同样的圆角效果，并且没有离屏渲染。但是如果label有背景色会是什么效果？
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.backgroundColor = UIColor.lightGray
//label.layer.masksToBounds = true
view.addSubview(label)
image.png
显示圆角对背景色没有作用。layer.cornerRadius只对layer有效果。可以做如下优化：
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let label = UILabel(frame: CGRect(x: 100, y: 100, width: 60, height: 22))
label.text = "准时达"
label.textColor = color
label.textAlignment = .center
label.layer.cornerRadius = 5
label.layer.borderColor = color.cgColor
label.layer.borderWidth = 1
label.layer.backgroundColor = UIColor.lightGray.cgColor
//label.layer.masksToBounds = true
view.addSubview(label)
把label.backgroundColor = UIColor.lightGray换成label.layer.backgroundColor = UIColor.lightGray.cgColor
image.png
达到效果并且不会产生离屏渲染
2.3 UIImageView
iOS 9.0 之后UIImageView里png图片设置圆角不会触发离屏渲染了
let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
imageView.image = UIImage(named: "photo")
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
view.addSubview(imageView)
没有离屏渲染
但是给imageView添加背景色后再加圆角会有离屏渲染，应该很少有这么奇葩需求吧
let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
imageView.image = UIImage(named: "photo")
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
imageView.backgroundColor = .green
view.addSubview(imageView)
有离屏渲染
2.4 UIButton
依然以饿了么-准时达效果为例
2.4.1 UIButton文字 + 圆角
文字加圆角很简单，只要不设置button.clipsToBounds = true就不会有离屏渲染
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setTitle("准时达", for: .normal)
button.setTitleColor(color, for: .normal)
button.layer.cornerRadius = 5
button.layer.borderColor = color.cgColor
button.layer.borderWidth = 1
// button.clipsToBounds = true
view.addSubview(button)
2.4.1 UIButton 设置图片
添加button.clipsToBounds = true时会有离屏渲染，不添加达不到圆角效果
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let image = createImage(color: color, frame: CGRect(x: 0, y: 0, width: 60, height: 22))
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setImage(image, for: .normal)
button.layer.cornerRadius = 5
button.layer.borderColor = color.cgColor
button.layer.borderWidth = 1
//button.clipsToBounds = true
view.addSubview(button)
不添加button.clipsToBounds = true
添加button.clipsToBounds = true
优化方法：对图片设置圆角，不要对button设置圆角。可以达到圆角效果并且不会有离屏渲染
let color = UIColor(red: 46.0 / 255.0, green: 160.0 / 255.0, blue: 252.0 / 255.0, alpha: 1.0)
let image = createImage(color: color, frame: CGRect(x: 0, y: 0, width: 60, height: 22))
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 60, height: 22)
button.setImage(image, for: .normal)
button.imageView?.layer.cornerRadius = 5
view.addSubview(button)
image.png
性能影响
Demo
性能测试结果发现阴影离屏渲染的影响明显大于圆角离屏渲染的影响
圆角-离屏渲染.png
圆角-非离屏渲染.png
阴影-离屏渲染.png
阴影-非离屏渲染.png
参考链接
iOS 离屏渲染优化(Offscreen Render)