iOS性能优化---转载《三》一次对MKMapView的性能优化（instrments core animation 使用）

2023-11-21 23:32
文章标签 使用 优化 性能 core ios 一次 转载 animation mkmapview instrments

本文主要是介绍iOS性能优化---转载《三》一次对MKMapView的性能优化（instrments core animation 使用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

最近做的项目主要是LBS这块 主打成员定位功能 我们的UI设计是这样的


乍一看上去是挺好挺美观的 不同的人会显示不同的头像 可是当人扎堆的时候 问题就来了


当人多的时候(例如上图所示) 地图滑动起来就能感觉到明显顿卡 那种不流畅感能折磨死人 所以 自然我们要解决这个问题(等等 先不要吐槽为什么不用地图聚合 因为这已经是地图放到最大了 聚合不适合这次的问题讨论)

分析

首先看下我是怎么实现这个annotationView的 由于这个annotationsView是异形的(也就是无法通过设置圆角直接得到) 而且里面的图片还因用户而异 所以解决方案就是使用layer.mask来进行遮罩 代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

@implementation MMAnnotationView

- (instancetype)initWithAnnotation:(id)annotation reuseIdentifier:(NSString *)reuseIdentifier

{

    self = [super initWithAnnotation:annotation reuseIdentifier:reuseIdentifier];

    if ( self )

    {

        self.frame = CGRectMake(0, 0, TRACK_ANNOTATION_SIZE.width, TRACK_ANNOTATION_SIZE.height);

        self.centerOffset = CGPointMake(0, -(TRACK_ANNOTATION_SIZE.height-3)/2);

        self.canShowCallout = NO;

        self.avatarView = [[UIImageView alloc] initWithFrame:self.bounds];

        [self addSubview:self.avatarView];

        self.avatarView.contentMode = UIViewContentModeScaleAspectFill;

        CAShapeLayer *shapelayer = [CAShapeLayer layer];

        shapelayer.frame = self.bounds;

        shapelayer.path = self.framePath.CGPath;

        self.avatarView.layer.mask = shapelayer;

        self.layer.shadowPath = self.framePath.CGPath;

        self.layer.shadowRadius = 1.0f;

        self.layer.shadowColor = [UIColor colorWithHex:0x666666FF].CGColor;

        self.layer.shadowOpacity = 1.0f;

        self.layer.shadowOffset = CGSizeMake(0, 0);

        self.layer.masksToBounds = NO;

    }

    return self;

}

//mask路径

- (UIBezierPath *)framePath

{

    if ( !_framePath )

    {

        CGFloat arrowWidth = 14;

        CGMutablePathRef path = CGPathCreateMutable();

        CGRect rectangle = CGRectInset(CGRectMake(0, 0, CGRectGetWidth(self.bounds), CGRectGetWidth(self.bounds)), 3,3);

        CGPoint p[3] = {

        {CGRectGetMidX(self.bounds)-arrowWidth/2, CGRectGetWidth(self.bounds)-6},

        {CGRectGetMidX(self.bounds)+arrowWidth/2, CGRectGetWidth(self.bounds)-6},

        {CGRectGetMidX(self.bounds), CGRectGetHeight(self.bounds)-4}

        };

        CGPathAddRoundedRect(path, NULL, rectangle, 5, 5);

        CGPathAddLines(path, NULL, p, 3);

        CGPathCloseSubpath(path);

        _framePath = [UIBezierPath bezierPathWithCGPath:path];

        CGPathRelease(path);

    }

    return _framePath;

}

我用代码生成了形状路径 并以此生成了layer的mask和shadowPath

使用时 只要直接用SDWebImage设置头像就行了

1

[annotationView.avatarView sd_setImageWithURL:[NSURL URLWithString:avatarURL] placeholderImage:placeHolderImage];

接下来用工具分析一下问题出来哪 分析性能当然是选择Instrments(用法在这里就不做介绍了) 打开Core Animation 然后运行程序 滑动地图 可以看到性能分析如下


原来平均帧数只有不到30帧 这离我们的目标60帧差得实在太远

再使用Debug Option来深入分析一下


由于MKMapView的原因 这里我们主要关心这几个选项

  • Color Blended Layers
  • Color Misaligned Images
  • Color Offscreen-Rendered Yellow

分别打开这几个选项 结果如下


可以看到

  • Color Blended Layers没有问题 不过这也是正常的 由于使用了mask 没有透明的地方
  • Color Misaligned Images除了默认头像外全中 这是因为服务器上的图片大小跟显示的大小不一致 导致缩放 而默认头像则是一致的 所以没问题
  • Color Offscreen-Rendered Yellow全中 由于使用了mask 导致大量的离屏渲染 这也是性能下降的主要原因

解决

问题的原因找到了 那么接下来该如何解决呢?

  • 首先mask是肯定不能用了
  • 其次下载下来的图片我们要预处理成实际大小

那么 直接把下载下来的图片合成为我们要显示的最终结果不就ok了吗? 试试看

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

- (void)loadAnnotationImageWithURL:(NSString*)url imageView:(UIImageView*)imageView

{

    //将合成后的图片缓存起来

    NSString *annoImageURL = url;

    NSString *annoImageCacheURL = [annoImageURL stringByAppendingString:@"cache"];

    UIImage *cacheImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:annoImageCacheURL];

    if ( cacheImage )

    {

        //LLLog(@"hit cache");

        imageView.image = cacheImage;

    }

    else

    {

        //LLLog(@"no cache");

        [imageView sd_setImageWithURL:[NSURL URLWithString:annoImageURL]

        placeholderImage:placeHolderImage

        completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {

        if (!error)

        {

            UIImage *annoImage = [image annotationImage];

            imageView.image = annoImage;

            [[SDImageCache sharedImageCache] storeImage:annoImage forKey:annoImageCacheURL];

            }

        }];

    }

}

@implementation UIImage (LJC)

- (UIImage*) annotationImage

{

    static UIView *snapshotView = nil;

    static UIImageView *imageView = nil;

    if ( !snapshotView )

    {

        snapshotView = [UIView new];

        snapshotView.frame = CGRectMake(0, 0, TRACK_ANNOTATION_SIZE.width, TRACK_ANNOTATION_SIZE.height);

        imageView = [UIImageView new];

        [snapshotView addSubview:imageView];

        imageView.clipsToBounds = YES;

        imageView.frame = snapshotView.bounds;

        imageView.contentMode = UIViewContentModeScaleAspectFill;

        CGFloat arrowWidth = 14;

        CGMutablePathRef path = CGPathCreateMutable();

        CGRect rectangle = CGRectInset(CGRectMake(0, 0, CGRectGetWidth(imageView.bounds), CGRectGetWidth(imageView.bounds)), 3,3);

        CGPoint p[3] = {

            {CGRectGetMidX(imageView.bounds)-arrowWidth/2, CGRectGetWidth(imageView.bounds)-6},

            {CGRectGetMidX(imageView.bounds)+arrowWidth/2, CGRectGetWidth(imageView.bounds)-6},

            {CGRectGetMidX(imageView.bounds), CGRectGetHeight(imageView.bounds)-4}

        };

        CGPathAddRoundedRect(path, NULL, rectangle, 5, 5);

        CGPathAddLines(path, NULL, p, 3);

        CGPathCloseSubpath(path);

        CAShapeLayer *shapelayer = [CAShapeLayer layer];

        shapelayer.frame = imageView.bounds;

        shapelayer.path = path;

        imageView.layer.mask = shapelayer;

        snapshotView.layer.shadowPath = path;

        snapshotView.layer.shadowRadius = 1.0f;

        snapshotView.layer.shadowColor = [UIColor colorWithHex:0x666666FF].CGColor;

        snapshotView.layer.shadowOpacity = 1.0f;

        snapshotView.layer.shadowOffset = CGSizeMake(0, 0);

        CGPathRelease(path);

    }

    imageView.image = self;

    UIGraphicsBeginImageContextWithOptions(TRACK_ANNOTATION_SIZE, NO, 0);

    [snapshotView.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage *copied = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return copied;

}

@end

然后使用的时候 只要简单的如下调用就OK了

1

[self loadAnnotationImageWithURL:avatarURL imageView:annotationView.avatarView];

看看修改之后的Instruments表现如何


  • Color Blended Layers全中 这也是无可避免的 因为显示的就是一张带透明度的图 但是由于地图的特殊性(头像的位置变化间隔较长 所以不会经常引发合成 也没有动画) 所以这里也不是问题
  • Color Misaligned Images没问题了 因为头像已被缩放成了相同大小
  • Color Offscreen-Rendered Yellow没问题了 因为只是简单的显示了一张图片 而并没有需要离屏渲染的东西了

再来看下帧数情况


Oh-Yeah~ 不光帧数达到了我们的目标60帧(由于还有业务逻辑线程在后台跑 所以没有那么的稳定) 就连平均运行耗时都下降了不少 就算地图上再多显示几十个人 也不成问题了

小结

不光是MKMapView 其实包括UITableView在内的很多地方都可以用文中所说的方法去优化 其核心点就是 合成+缓存 当然 由于合成还是会耗费一部分资源的 所以比较适合头像这种小的资源

关于图形性能优化 可以看下这篇好文(有对文中提到的Debug Option不太明白的 这里有详细的解释)




原文地址：http://www.cocoachina.com/ios/20150717/12583.html

这篇关于iOS性能优化---转载《三》一次对MKMapView的性能优化（instrments core animation 使用）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/405878。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
HDFS—存储优化（纠删码）

HDFS—存储优化（纠删码）

纠删码原理 HDFS 默认情况下，一个文件有3个副本，这样提高了数据的可靠性，但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码，采用计算的方式，可以节省约50％左右的存储空间。 此种方式节约了空间，但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件，都会执行此策略。 默认只开启对 RS-6-3-1024k
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2