iOS instruments之Core Animation

我就是我 2024-02-18 19:23 9阅读 0赞

首先，感谢[这篇文章][Link 1]的作者，将文章分享出来。文章主要讲述一下几个问题：

1.  为什么要把控件尽量设置成不透明的，如果是透明的会有什么影响，如何检测这种影响？
2.  为什么cell中的图片，尽可能要使用正确的大小、格式，如果错误会有什么影响，如何检测这种影响？
3.  为什么设置阴影和圆角有可能影响滑动时流畅度？
4.  `shouldRasterize`和离屏渲染的关系是什么，何时应该使用？

具体的请查看上边的原文。

本文进行一下适当的归纳：

## 1 图层混合检测Color Blended Layers ##

颜色的混合(blending)需要消耗一定的GPU资源，因为实际上可能不止只有两层。如果只想显示最上层的蓝色，可以把它的透明度设置为100%，这样GPU会忽略下面所有的layer，从而节约了很多不必要的运算。

第一个调试选项"Color Blended Layers"正是用于检测哪里发生了图层混合，并用红色标记出来。因此我们需要尽可能减少看到的红色区域。一旦发现应该想法设法消除它。开始调试后勾选这个选项，我们在手机上可以看到如下的场景（公司项目，因此打了马赛克，希望理解）：

![70][]

优化后，上图中偏红色的区域统一变为绿色，见下图：

![70 1][]

优化办法：（1）设置background及alpha；

（2）对于显示中文字体的控件需要设置xxx.layer.masksToBounds = YES;（原因：如果label文字有中文，依然会出现图层混合，这是因为此时label多了一个`sublayer`）

## 2 光栅化Color Hits Green and Misses Red    ##

光栅化是将一个layer预先渲染成位图(bitmap)，然后加入缓存中。如果对于阴影效果这样比较消耗资源的静态内容进行缓存，可以得到一定幅度的性能提升。

xxx.layer.shouldRasterize = true;

第二个调试选项是“Color Hits Green and Misses Red”，它表示如果命中缓存则显示为绿色，否则显示为红色，显然绿色越多越好，红色越少越好。

光栅化的缓存机制是一把双刃剑，先写入缓存再读取有可能消耗较多的时间。因此光栅化仅适用于较复杂的、静态的效果。

如果光栅化的层变红得太频繁那么光栅化对优化可能没有多少用处。位图缓存从内存中删除又重新创建得太过频繁，红色表明缓存重建得太迟。可以针对性的选择某个较小而较深的层结构进行光栅化，来尝试减少渲染时间。

## 3 颜色格式Color Copied Images ##

CPU主要处理两件事：

1.  把图片从PNG或JPEG等格式中解压出来，得到像素数据
2.  如果GPU不支持这种颜色各式，CPU需要进行格式转换

比如应用中有一些从网络下载的图片，而GPU恰好不支持这个格式，这就需要CPU预先进行格式转化。第三个选项“Color Copied Images”就用来检测这种实时的格式转化，如果有则会将图片标记为蓝色。

如果调试时发现有图片被标记为蓝色，说明图片格式出现了一些问题。

## 4 图片大小Color Misaligned Images ##

第6个选项“Color Misaligned Images”。当UIView(及其子类)的frame像素不对齐显示洋红色；当图片的像素大小与控件的大小不一致，显示黄色。

图片的缩放需要占用时间，因此我们要尽可能保证无论是本地图片还是从网络或取得图片的大小，都与其frame保持一致。

第三个优化是调整所有图片的像素大小以避免不必要的缩放。

优化方法详见[这篇文章][Link 2]和[这篇文章][Link 3]。

## 5 其他选项    ##

第7个选项“Color Offscreen-Rendered Yellow”会把需要离屏渲染的地方标记为黄色，大部分情况下我们需要尽可能避免黄色的出现。

第8个选项“Color Compositing Fast-Path Blue”用于标记由硬件绘制的路径，蓝色越多越好。

第9个选项“Flash updated Regions”用于标记发生重绘的区域。刷新视图时，需要重绘的区域尽可能缩小，对于未发生变化的内容则不应该重绘。

[Link 1]: https://bestswifter.com/uikitxing-neng-diao-you-shi-zhan-jiang-jie/
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/006e2ffd9264415daaa8827a89021105.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/12279ff4368d45e3b47e1b926a4ab242.png
[Link 2]: http://ios.jobbole.com/84151/
[Link 3]: https://www.aliyun.com/jiaocheng/357603.html