SDWebImage 对多gif显示内存消耗过高的优化

内存过高

• 项目中有时候会遇到当前页面用到大量gif的情况,这个时候如果仅仅用SDWebImage去加载gif的话,会出现内存暴增的现象.
• 这是因为 SD在对 gif 的处理过程中采用了一个数组存储 gif 的帧图片，当有大量动态图时,大量图片存在内存中,造成了内存暴增的现象.

原因分析

• 先看SDWebImage的源代码,SDWebImage通过这个类UIImage+GIF.h来处理gif,我们进入头文件发现会调用一个+ (UIImage *)sd_animatedGIFWithData:(NSData *)data 这样的类方法
  下面是这个方法的源代码,我已经加了很详细的注释,并且把问题的所在也写的很清楚.

+ (UIImage *)sd_animatedGIFWithData:(NSData *)data {
    //安全判断
    if (!data) {
        return nil;
    }
    //二进制类型的转换
    //CGImageSourceRef是个什么呢? 我们可以看到这是一个typedef CGImageSource * CGImageSourceRef;
    //这是一个指针,CGImageSource是对图像数据读取任务的抽象，通过它可以获得图像对象、缩略图、图像的属性(包括Exif信息)。
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    //获取有几张图片
    size_t count = CGImageSourceGetCount(source);
    //返回的动态图片
    UIImage *animatedImage;
    //如果为一张图片,那就只显示一张图片
    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    }
    //如果为多张图片,就开始创建动态图片
    else {
        //集合 存放单张的图片
        NSMutableArray *images = [NSMutableArray array];
        //时长
        NSTimeInterval duration = 0.0f;
        for (size_t i = 0; i < count; i++) {
            //取出gif单张的图片
            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
            // 计算出单张图片的播放时长
            duration += [self sd_frameDurationAtIndex:i source:source];
            //添加到数组中
            [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];
            //释放
            CGImageRelease(image);
        }
        //安全判断同时计算需要播放的时间
        if (!duration) {
            duration = (1.0f / 10.0f) * count;
        }
        //把静态的图片转换为动态的image,所以会有大量单张的图片存放在内存中
        animatedImage = [UIImage animatedImageWithImages:images duration:duration];
    }
    //释放图像数据读取任务的抽象对象
    CFRelease(source);
    //返回动态图片
    return animatedImage;
}

解决方案

• gif播放其实就是一张一张图片返回去,我们要写一个方法,只要不断地取出当前的那一张图片,这样就可以有效的避免内存中存储了大量图片.那如何实现不断地去取呢,我们可以开一个定时器,定时器不断的去掉我们写的方法,不断地去取图片赋值给imageView.

代码重写

• 我采用创建一个UIImageView子类来封装定时器方法.
• 需要注意导入相关的头文件.
• 这个方法的本质就是用一个定时器不断的去获取一张图片给imageView,这样就避免了大量图片存入内存中.
• 附上github源码github源码,懒得下的人,源码就在下面.我也写了很详细的注释.
• 实例代码中,在一个界面上用了6个gif,如果用原生的方法,内存会达到130M左右,如果采用计时器方法,则只有30M左右

#import "WBWebImage.h"
#import 
#import 
#import 
#import 

@implementation WBWebImage {
    //记录当前是第几张gif
    NSInteger _currentIndex;
    //定时器
    NSTimer *_timer;
    //gif图片的二进制数据
    NSData *_data;
}
/*
 //1.根据url去下载图片的二进制数据
 //2.根据图片的类型判断如果是gif特殊处理
 //3.如果是其他类型,直接显示
 */
- (void)WB_downloadIMGOrGif:(NSURL *)url {
    _timer = [NSTimer timerWithTimeInterval:0.12 target:self selector:@selector(updateIMG) userInfo:nil repeats:YES];
    [self downloadIMGData:url];
}
- (void)updateIMG {
    //不断的调用生成gif的方法,并且不断的赋值给imageView
    self.image = [self wb_animatedGIFWithData:_data];
}

//下载图片
- (void)downloadIMGData:(NSURL *)url {
    //从管理者进行查找
    [[SDWebImageManager sharedManager].imageDownloader downloadImageWithURL:url options:0 progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
        if (error) {
            NSLog(@"下载错误%@",error);
            return;
        }
        //根据图片的类型进行判断;
        //UI操作放在主线程
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            if ([[NSData sd_contentTypeForImageData:data] isEqualToString:@"image/gif"]) {
                //据图片的类型判断如果是gif特殊处理
                _data = data;
                //将定时器加入到运行循环中
                [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSDefaultRunLoopMode];
            } else {
                
                self.image = image;
            }
        }];
    }];
}
//原始代码是把所有的gif全部加载处理完毕才去播放,内存占用过多
//修改: 开启一个定时器,不断的去gif中取出对应的单张图片
- (UIImage *)wb_animatedGIFWithData:(NSData *)data {
    if (!data) {
        return nil;
    }
    //类型转换
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    //几张图片
    size_t count = CGImageSourceGetCount(source);
    //返回的变量
    UIImage *animatedImage;
    
    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    }
    else {
        //取出gif中的单张图片
        CGImageRef image = CGImageSourceCreateImageAtIndex(source, _currentIndex % count, NULL);
        _currentIndex ++;
        //类型的转换
        animatedImage = [UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
        
            CGImageRelease(image);
    }
    CFRelease(source);
    return animatedImage;
}
@end

总结

• 利用定时器方法,会稍微增加一些cpu的负荷,原因是cpu不断的再计算.
• 利用图片数组来做gif,虽然cpu轻松了,但是内存负荷大.
• 两个方法,一个是用性能去换空间,一个是用空间换性能.