iOS加载gif方案及性能对比

最新推荐文章于 2023-08-21 15:52:54 发布

想名真难

最新推荐文章于 2023-08-21 15:52:54 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： UI相关

本文链接：https://blog.youkuaiyun.com/u014600626/article/details/113767876

UI相关专栏收录该内容

77 篇文章

订阅专栏

本文对比了五种iOS平台GIF加载方案：FLAnimatedImageView、UIWebView、WKWebView、YYImage及SDImage，在CPU利用率、内存占用等方面进行了详细评测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看结论, 测试设备: iPhone 6s,iOS12.1,

SDImage的CPU利用率很低, 但是内存占用最高,应该是把gif中所有的图片都缓存了,可以直接使用UIImageView加载,不用改代码;

WKWebView比较好, 但是做起来比较复杂,而且H5对图片的填充模式支持比较麻烦;

YYImage的CPU利用率很低,内存也是极地的, 完美的方案;

FLAnimatedImageView比较卡, cpu在30%;

UIWebView只是凑数的,cpu在9%-30%之间成锯齿状波动, 现在上架如果还是用UIWebView会被拒绝.

方案1: 使用FLAnimatedImage加载,需要引入FLAnimatedImageView框架

#pragma mark FLAnimatedImage加载image
- (void)testGifImage {

    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    // cpu 30%左右, 内存17M
    FLAnimatedImage * image = [[FLAnimatedImage alloc] initWithAnimatedGIFData:data];
    FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] initWithFrame:self.view.bounds];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.animatedImage = image;
    [self.view addSubview:imageView];
    //    设置FLAnimatedImageView中的CADisplayLink效果不明显
    //        self.displayLink.preferredFramesPerSecond = 1;
    // 设置小于5帧的情况下CPU下降明显,但是卡顿也明显
    //        self.displayLink.preferredFramesPerSecond = 15; // 60,30,20,15帧CPU下降不明显,

}

方案2: 使用UIWebView加载,凑个数, 在提审就会被拒绝

#pragma mark UIWebView加载image
- (void)testGifImage2 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    // 使用UIWebView播放, CPU在9%, 30%两个值进行锯齿状波动, 内存占用较大40M,UIWebView已无法提交审核了
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    webView.userInteractionEnabled = NO;//用户不可交互
    [webView loadData:data MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
    [self.view addSubview:webView];

}

方案3: 使用WKWebView加载,性能很好,但是改动起来比较麻烦,得熟悉H5,或者找web端的人帮忙


#pragma mark WKWebView加载image
- (void)testGifImage3 {

    // 系统解决方案, CPU占用极地1%-2%, 内存占用极地,15M
    CGFloat heightView = [UIApplication sharedApplication].statusBarFrame.size.height;
    CGFloat bottomHeightView = 0;
    if (@available(iOS 11.0, *)) {
        bottomHeightView = [[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom;
    }
    // webView顶部会莫名多出来一个一个状态栏的高度
    WKWebView * wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, -heightView, kScreenWidth, kScreenHeight+heightView+bottomHeightView)];

    NSString *path = [[NSBundle bundleForClass:[self class]] pathForResource:@"loadGif" ofType:@"html"];
    NSString *htmlStr = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    wkWebView.UIDelegate = self;
    wkWebView.navigationDelegate = self;
    // 禁止上下滚动
    wkWebView.scrollView.scrollEnabled = NO;
    // 禁止双指放大缩小
    wkWebView.scrollView.userInteractionEnabled = NO;
    wkWebView.scrollView.bouncesZoom = YES;
    [wkWebView loadHTMLString:htmlStr baseURL:nil];
    [self.view addSubview:wkWebView];

}

// 贴上自己半吊子水平的前端代码,这个就是本地HTML里的东西
<html style="height: 100%;"><head>

<meta name="viewport" content="width=device-width, minimum-scale=0.1">
	<style type="text/css" abt="234">
		img{
   		 width: 100%;
   		 height:100%;
		}
	</style>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%">
	<img src="http://res.hongrenshuo.com.cn/66532a15-c726-4edf-bb4f-0b8897753f31.gif?t=1606124887942"></body>
</html>

方案4: 使用YYImage加载,性能很好,YYAnimatedImageView的父类就是UIImageView, 需要稍稍改下代码

#pragma mark YYImage加载
- (void)testGifImage4 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    YYAnimatedImageView *image = [[YYAnimatedImageView alloc] initWithFrame:self.view.frame];
    image.image = [YYImage imageWithData:data];
//    image.image = [YYImage imageNamed:@"直播间测试gif.gif"];
    [self.view addSubview:image];

}

方案5: 使用SDImage加载,性能很好,但是内存最高,SD内部最终调到了方案6[UIImage animatedImageWithImages:]的方法

#pragma mark SD加载image
- (void)testGifImage5 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    UIImage *image = [UIImage sd_imageWithGIFData:data];
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    imageView.image = image;
    [self.view addSubview:imageView];

}

方案6: 使用[UIImage animatedImageWithImages]加载,性能很好,但是下载太费流量

#pragma mark UIImage加载image
- (void)testGifImage6 {

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:imageView];

    // 只能处理单个图片,而且单图1.2M,整个下载下来需要1.2*50=60M, 而生成的gif才2.1M
    // 所以这种写法也就看看就行了
    // CPU:0%, 内存:60M
    NSMutableArray *array = [NSMutableArray array];
    for (int i = 1; i<=50; i++) {
        NSString *imageName = [NSString stringWithFormat:@"直播间测试gif-%@.tiff",@(i)];
        UIImage *image = [UIImage imageNamed:imageName];
        [array addObject:image];
    }
    // 方式1
//    imageView.animationImages = array;
//    imageView.animationDuration = 3;
//    [imageView startAnimating];

    // 方式2
    imageView.image = [UIImage animatedImageWithImages:array duration:3];
    NSLog(@"UIImage animatedImageWithImages动画加载");

}

测试demo地址: https://github.com/guochaoshun/testGif