Fork me on GitHub

iOS开发 容易忽略的帧率杀手：阴影

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

离屏渲染

　　关于 UITableView、UICollectionView 滑动卡顿，大家都会想起一个大杀手：圆角。

　　说起圆角，其实是针对 UITableView、UICollectionView 等列表视图 Cell 及其子视图中包含的需要重复大量切圆角的场景，关于这个问题当时在开发圈里也曾经引起过热议，解决方案也挺多，这里就不再过多的去讨论。

　　不过有一点值得注意的是，可能是苹果也意识到离屏渲染会产生性能问题，所以 iOS9 及之后的 iOS 版本对 UIImageView 离屏渲染做了一些优化。

iOS 版本上的优化

  • iOS 9.0 之前 UIImageView 跟 UIButton 设置圆角都会触发离屏渲染。

  • iOS 9.0 之后 UIButton 设置圆角会触发离屏渲染，而 UIImageView 里 png 图片设置圆角不会触发离屏渲染了，但是其他类型的图片依然会触发离屏渲染，而且如果设置其他阴影效果之类的也是会触发离屏渲染的。

Instruments 监测离屏渲染

Instruments 的 Core Animation 工具中有几个和离屏渲染相关的检查选项：

  • Color Offscreen-Rendered Yellow
    开启后会把那些需要离屏渲染的图层高亮成黄色，这就意味着黄色图层可能存在性能问题。
  • Color Hits Green and Misses Red
    如果 shouldRasterize 被设置成 YES，对应的渲染结果会被缓存，如果图层是绿色，就表示这些缓存被复用；如果是红色就表示缓存会被重复创建，这就表示该处存在性能问题了。

注意：Xcode9.3之后的版本功能上做的调整，这些选项已经直接集成到 Xcode 里面了

绘制阴影造成的性能问题

　　不过我们今天主角并不是圆角，不过杀伤力并不亚于圆角，他的名字叫做阴影。

　　其实这个东西平常都是设计同学或者产品同学，为了增强页面的视觉效果而添加的。

　　一般的实现方式是这样的：

1
2
3
4
5
6
7
8
9
10
// 这里我们只是给 cell 添加阴影效果，其他什么都不做，看看阴影对设备性能的影响
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.cellId, for: indexPath)
    cell.backgroundColor = UIColor.gray
    cell.layer.shadowOffset = CGSize(width: 0, height: 2)
    cell.layer.shadowOpacity = 0.5

    return cell
}

　　打开 Xcode 中监测离屏渲染的选项之后，展示在界面上是这个效果（Cell全都触发了离屏渲染）：

　　然后我们按 Command+I 快捷键进入 Profile，选择 CoreAnimation 检测帧率及CPU、GPU利用率（本文所用的 iPhone 设备为 iPhone6s，系统版本为 iOS12.0.1）。

开启录制之后，操作也很简单，就只是简单的上下滑动列表。

　　可以看到监测到的数据如下：

　　其实从手机端的体验感觉还说的过去，帧率基本能达到50fps，卡顿感比较弱，大部分用户还是可以接受的。但是这里比较致命的问题是：1. 我们的列表里还没有填充数据，仅仅是加了个阴影而已啊，加入了业务逻辑后，帧率肯定会进一步降低。2. GPU 使用率高的可怕，一般情况下，移动设备上面几个耗电大户无非就是 CPU、GPU、WiFi 模块，GPU 占用率这么高，用户最直观的感受就是：我的手机是不是该换电池了？？？这对于一个高使用率的 App 来说简直是不能接受的。

　　

　　发现问题之后，其实解决方案也很简单：将 Cell 的 layer 进行光栅化。虽然光栅化也会触发离屏渲染，但是光栅化会将阴影合成到图片中，cell 重用的时候直接加载图片即可，不必每次都绘制阴影，从而相对的提升性能。

1
cell.layer.shouldRasterize = true

　　不过单独设置这个属性是不够的，因为默认情况下，光栅化生成的图片是 @1x 的，而现在 iOS 设备显示器基本都是 @2x 或者 @3x，这样就会造成显示模糊，锯齿感强烈，影响视觉效果。

　　layer 有一个属性就是专门解决这个问题的：

1
2
3
4
5
/* The scale at which the layer will be rasterized (when the
 * shouldRasterize property has been set to YES) relative to the
 * coordinate space of the layer. Defaults to one. Animatable. */

open var rasterizationScale: CGFloat

　　那么要解决这个问题，只需要设置光栅化的默认缩放系数为屏幕显示倍率即可：

1
cell.layer.rasterizationScale = UIScreen.main.scale

　　更改完之后，我们打开 Xcode 中监测离屏渲染的选项，把项目运行到设备上查看效果，这次已经没有明显的离屏渲染了（光栅化触发离屏渲染的过程很短，估计没有捕捉到）：

　　之后我们再次进入 Profile，查看更改完之后的效果：

　　界面上显示效果和修改之前一样，滑动帧率有所提升，重要的是 GPU 利用率大大降低了，用户最直观的体验就是设备续航体验更加友好了，再也不会被用4000ma·h大电池手机的朋友嘲笑电池一天几冲了 [捂脸]。

　　至此，UICollectionViewCell 阴影效果造成列表滑动卡顿的问题就得以解决了，方案虽然很简单，还是需要我们在日常开发中多注意这类容易引发性能问题的点，发现问题之后能够及时的优化。做好用户体验，才能开发出更加优秀 的 App！

------------- 本文结束感谢您的阅读 -------------