转载

Color Blended Layers

前言

最近笔者也是对性能优化方面特别感兴趣，为此做一性能优化相关的专题，记下学习的笔记，后来者都可以参考参考。

本篇文章专门学习 Color Blended Layers 这一项优化。翻译过来，大概的意思就是图层颜色混合。

官方的说明是：

Shows blended view layers. Multiple view layers that are drawn on top of each other with blending enabled are highlighted in red. Reducing the amount of red in your app when this option is selected can dramatically improve your app’s performance. Blended view layers often cause slow table scrolling.

基本概念

我们要明白像素的概念。屏幕上每一个点都是一个像素点，颜色由R、G、B、alpha组成。如果某一块区域上覆盖了多层layer，最后所计算出来的显示的颜色效果，会受到这些layer的共同影响。

举个例子：

上层是蓝色(RGB=0,0,1),透明度为50%，下层是红色(RGB=1,0,0)。那么最终的显示效果是紫色(RGB=0.5,0,0.5)。

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

Core Animation Instrucment

类似如下图，可以通过Instrucments来选择Core Animation查看FPS：

Color Blended Layers

注意：若要看FPS，需要在真机上运行。

Demo优化前

Color Blended Layers

在优化之前，我们通过模拟器->Debug->Color Blended Layers可看到上图的效果。我们发现有好多混合的地方，这都是影响滚动时流畅性的。

Demo优化后

Color Blended Layers

优化后，我们看到没有中文标签变成绿色了，而有中文的标签还是混合后的颜色。关于有中文的标签如何去优化，这个问题现在没有办法，如果大家有什么好的方法，请一定要告诉笔者，成分感谢！

优化的代码

在优化前，cell的标题的背景颜色并没有手动设置，而是使用了默认的颜色，这时候即使我们的标题是没有中文的，也会出现混合。而笔者只是添加了一行代码：

  self.titleLabel.backgroundColor = self.contentView.backgroundColor;

这么一行代码，使得标签的背景色和父视图的背景颜色一样，就只可以解决混合的问题（中文除外）。如何我们设置背景色为clear，一样会出现混合，即使父视图也是clear。

同样，我们在配置CollectionViewCell的时候，也是这么处理：

  - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionViewcellForItemAtIndexPath:(NSIndexPath *)indexPath {   UICollectionViewCell *cell = [collectionViewdequeueReusableCellWithReuseIdentifier:@"identifeir"                                                                          forIndexPath:indexPath];   UIImageView *imgView = [cell.contentViewviewWithTag:100];   if (imgView == nil) {     cell.contentView.backgroundColor = [UIColor whiteColor];          imgView = [[UIImageView alloc]init];     imgView.frame = CGRectMake(0,                               0,                               cell.contentView.bounds.size.width,                               cell.contentView.bounds.size.height - 20);     [cell.contentViewaddSubview:imgView];     imgView.tag = 100;     imgView.layer.shadowPath = nil;          UILabel *titleLabel = [[UILabel alloc]init];     titleLabel.numberOfLines = 0;     titleLabel.text = @"www.henishuo.com";     [cell.contentViewaddSubview:titleLabel];     titleLabel.tag = 101;     titleLabel.font = [UIFontsystemFontOfSize:12];     titleLabel.frame = CGRectMake(0, imgView.frame.size.height, imgView.frame.size.width, 20);     titleLabel.backgroundColor = cell.contentView.backgroundColor;   }      NSString *imgName = self.model.imgs[indexPath.row];   NSString *path = [[NSBundle mainBundle]pathForResource:imgNameofType:@"jpg"];   imgView.image = [UIImageimageNamed:path];      return cell; }

我们设置cell的背景色、collectionview的背景色都为白色，然后titleLabel的背景色与父视图的背景色设置成一样，这样就可以解决混合问题，中文文本除外。

我们尝试设置opaque、alpha都会是图层混合，因此最关键的还是backgroundColor这一关键属性。