iOS 关于离屏渲染 Off-Screen Rendering

1. 什么是离屏渲染

---

三种不同的渲染方式：屏幕渲染、离屏渲染和CPU渲染。
屏幕渲染，在用于显示的屏幕缓冲区中进行，不需要额外创建新的缓存，也不需要开启新的上下文，所以性能较好，但是收到缓存大小限制等因素，一些复杂的操作无法完成。
离屏渲染，指的是在GPU的当前屏幕缓冲区外开辟新的缓冲区进行操作。
离屏渲染的过程分解：
a. 创建新的缓冲区
b. 切换上下文到离屏缓冲区(消耗资源较大)
c. 在离屏缓冲区进行渲染
d. 切换上下文到显示屏幕上(消耗资源较大)
e. 将离屏缓冲区的渲染结果显示到屏幕上

2. 如何制造一个离屏渲染

---

a. 创建一个UITableView，设置其Cell固定row有2000个。
b. Cell的里面创建一个UIImageView数组，每个UIImageView固定加载同一张图片，在布局的时候，每张图片大小比之前一张图片的size减1，形成汉诺塔的叠加样子

image.png

c. 开启UIImageView的光栅化，这样整张UIImage显示的图片都将成为离屏渲染的区域

IMG_0005.png

我们最终在手机上得到的效果：

IMG_0006.png

ViewController代码如下：

class ViewController: UIViewController {
    class CellView: UITableViewCell {
        static var reuseIdentifier: String { 
            return "ViewController.CellView"
        }
        var contentImageViews = [UIImageView]()
        
        override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
            super.init(style: style, reuseIdentifier: reuseIdentifier)
            
            setupUI()
            configUI()
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError()
        }
        
        func setupUI() {  
            let imagesCount = 50
            let baseInset = 30
            (0 ..< imagesCount).forEach { i in 
                let imageView = UIImageView(image: UIImage(named: "image"))
                contentImageViews.append(imageView) 
                addSubview(imageView)
                imageView.snp.makeConstraints({ (make) in
                    make.center.equalTo(self)
                    make.size.equalTo(self).inset(baseInset + i)
                })
            }
        }
        
        func configUI() {
            contentImageViews.forEach {
                $0.layer.shouldRasterize = true
                $0.layer.rasterizationScale = UIScreen.main.scale
            }
        }
    }
    
    let tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        setupUI()
        configUI()
    }
    
    func setupUI() {
        [tableView].forEach { view.addSubview($0) }
        tableView.snp.makeConstraints { (make) in
            make.center.size.equalTo(self.view)
        }
    }
    
    func configUI() {
        tableView.dataSource = self
        tableView.register(CellView.classForCoder(), forCellReuseIdentifier: CellView.reuseIdentifier)

    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2000
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellView.reuseIdentifier, for: indexPath) as! CellView
        
        return cell
    }
}

demo工程地址：
https://github.com/linx214/Off-Screen-Rendering.git

在Instuments中调试工程

image.png

Touch5，真机调试，在cell滑动时，最大帧数3帧，GPU利用率92%~95%，CPU利用率平均在6%

3. 为什么产生离屏渲染

---

a. 最终显示在手机上的是一个2D的平面，图层可能会有很多层，GPU需要计算哪些图层是在上层显示，哪些图层是被遮盖的部分；
b. 如果图层还有alpha通道，则需要计算这些混合后的颜色，例如上层是一个红色,alpha = 0.5，下层是蓝色,alpha = 1, 则混合后的颜色是一个紫色，同样两张不透明的图片，一张带有alpha通道，一张不带，其GPU的渲染过程也是不一样的，CALayer中的opaque属性可以用来直接控制图层是否需要混合；
c. 图层发生缩放，GPU需要截取合并的图层位置，Core Animation 工具和模拟器有一个叫做 color misaligned images 的选项，当这些在你的 CALayer 实例中发生的时候，这个功能便可向你展示。
还有光栅化、遮罩、阴影、抗锯齿等都会产生离屏渲染。

4. 如何优化离屏渲染

---

尝试使用CPU进行渲染，在CellView中，重载drawRect方法，使用CoreGraphics进行绘制

image.png

换成使用CPU进行渲染之后，启动程序时发现，APP的启动时间用了将近22秒之多，时间都花在申请内存的开销上

image.png

然而实际运行中，程序能够保证60帧的运行流畅度，CPU利用率在15%左右，GPU利用率平均值11.6%

5. 结语

---

---

参考文章：
https://objccn.io/issue-3-1/