原理网上能搜到很多，本文只讲实践

测试环境：

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)