iOS图片加载新框架 - FlyImage

FlyImage

FlyImage 整合了SDWebImage,FastImageCache,AFNetworking的优点,是一个新的性能高效、接口简单的图片加载框架。

特点

  • 高效
  1. 可将多张小图解码后存储到同一张大图上,在同屏渲染多图时,效率极高;
  2. 支持mmap内存映射,高效的I/O操作,减少一次文件拷贝操作,同时减少内存占用;
  3. 支持Byte Alignment字节对其,渲染过程中,避免执行CA::Render::copy_image内存操作;
  • 接口简单
  1. 支持UIImageView,CALayer Category;
  2. 不用考虑小图片尺寸,简单的存储和读取接口;
  3. 一套方案同时解决单张大图和多张小图的两种业务场景;
  • WebP 高效的图片压缩方式;
  • 异步下载 支持下载进度Block,方便实现自定义的下载动画;

流行框架对比

现在iOS上比较流行的两套图片加载框架:

  • SDWebImage提供了从下载到渲染一整套的解决方案,同时支持Category特性,WebP格式,使用起来非常简单;但是同屏多张小图快速滚动时,界面就会很明显的卡顿;
  • FastImageCache Path推出的,非常适合于小图片的高效渲染,内部优化了I/O读取,解码时支持Byte Alignment减少内存拷贝,同时仅需一次解码,可以说是做到了极度优化。但是FIC有两大缺点:
  • 为了精简代码,从1.2以后取消图片下载功能;
  • 接口非常难用,使用时还需要指定FICImageFormat,每个Format中的图片size必须保持一致,同时每张图片需要与[FICEntity绑定,我仅仅是想快速展示多个icon而已...

基于上述的分析,如果有一个图片库可以将两者的优点结合在一起,那该多好!FlyImage就是基于此想法诞生的,新的库整合了FastImageCache的优化方案,同时让接口变得更加易用。

FlyImage可以在一个文件中绘制多张不同size的小图片,存储和获取时只需要一个固定的key;同时将内存映射的方法应用到大图片的显示方案中,减少内存的拷贝次数,加快读取速度。具体的使用方法如下:

如何使用

安装

platform :ios, '8.0'
pod 'FlyImage', '~>1.0'

使用 UIImageView/CALayer

UIImageView *iconView = [[UIImageView alloc] initWithFrame:frame];
[iconView setIconURL:[NSURL urlWithString:@"http://original"]];
[]self.view addSubview:iconView];

使用 FlyImageCache

// 通过Key获取单张图片
[[FlyImageCache sharedInstance] asyncGetImageWithKey:key
                                           completed:^(NSString *key, UIImage *image) {
        imageView.image = image;
}];

// 删除一张图片
[[FlyImageCache sharedInstance] removeImageWithKey:key];

// 清除所有图片
[[FlyImageCache sharedInstance] purge];

使用 FlyImageIconCache

// 添加一张小图
[[FlyImageIconCache sharedInstance] addImageWithKey:key
        size:drawSize
        drawingBlock:^(CGContextRef context, CGRect contextBounds) {
            // 手动绘制
            UIImage *image = [UIImage imageWithName:@"imageName"];

            UIGraphicsPushContext(context);
            [image drawInRect:contextBounds];
            UIGraphicsPopContext();
        }
        completed:nil];

// 获取一张小图
[[FlyImageCache sharedInstance] asyncGetImageWithKey:key
                                           completed:^(NSString *key, UIImage *image) {
        imageView.image = image;
}];

性能

Memory

测试工程: FlyImageView / Device: iPhone6 Plus,滚动列表中连续显示多张大图,FlyImage不会增加Image IO的内存

Memory FlyImage SDWebImage UIKit
All Heap Allocations 2~7M 2~4M 2~5M
All Anonymous VM 17~30M 310M 17~30M

FPS

测试工程: FlyImageIconView / Device: iPhone6 Plus,同屏渲染170张小图,FlyImage顺滑的浏览体验

FlyImage SDWebImage UIKit
58~60FPS 6~7FPS 6~7FPS
同屏多图

类图

类图
  • FlyImageDataFIle 封装了mmap的操作,提供高效的I/O文件操作,支持读取、写入、动态扩张文件长度的功能。

  • FlyImageDataFileManager 负责FlyImageDataFIle的增加、删除和查找。使用者不能直接实例化FlyImageDataFIle,而是需要通过Manager进行这些操作;同时可以获取当前文件夹下文件的数量和占用空间。

  • FlyImageDecoder 解码内存数据,并生成UIImage对象。WebP格式的转换就在该类中完成。

  • FlyImageEncoderFlyImageIconCache类服务,将图片绘制到画布上,生成bitmap格式。

  • FlyImageCache 负责图片的增加、删除和查找。每个图片都对应一个key,这些信息都会被保存在一个meta文件中。当该类被实例化后就会自动创建或自动获取该meta文件,可以指定不同的meta文件路径。在实际使用过程中,App会提供清除当前缓存的操作,但是又想将一些必要的图片保留,比如当前用户的头像和未发布的草稿图片等,针对这个需求,FlyImageCache提供了便捷的接口- (void)protectFileWithKey:(NSString*)key;- (void)unProtectFileWithKey:(NSString*)key;操作,处于protect状态的图片即使在执行purge操作时也不会被清除。

  • FlyImageIconCache 负责小图片的增加、删除、替换和查找。和FlyImageCache接口基本一致,只不过该类只维护一个FlyImageDataFIle事例,所有小图片解码后都会存放在该文件中。当然你也可以创建多个实例,将经常一同使用的小图片放在一个FlyImageDataFIle中。

  • FlyImageDownloader 负责下载图片,注意该类并不负责存储。在发起一个下载请求后,会得到一个类型为FlyImageDownloadHandlerId的标识符,如果图片被移出当前显示区域后,可以调用- (void)cancelDownloadHandler:(FlyImageDownloadHandlerId*)handlerId;移除该下载请求,节省资源。

  • UIImageView+FlyImageCache, CALayer+FlyImageCacheUIImageView提供了便捷的分类接口`。

      - (void)setImageURL:(NSURL*)url;
    
  • UIImageView+FlyImageIconCache, CALayer+FlyImageIconCacheCALayer提供了便捷的分类接口`。

      - (void)setIconURL:(NSURL*)url;
    

源代码

https://github.com/northwind/FlyImage ,欢迎大家测试并给予反馈,谢谢。

Reference

  1. FastImageCache
  2. SDWebImage
  3. 认真分析mmap:是什么 为什么 怎么用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容