注册 登录
主题 : iOS图片加载新框架 - FlyImage
级别: 新手上路
UID: 538922
精华: 0
发帖: 2
可可豆: 11 CB
威望: 11 点
在线时间: 2(时)
注册时间: 2016-01-16
最后登录: 2017-05-31
0 楼:  发表于: 2016-09-28 11:35    发自: Web Page
来源于 显示问题 分类

iOS图片加载新框架 - 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;同时将内存映射的方法应用到大图片的显示方案中,减少内存的拷贝次数,加快读取速度。具体的使用方法如下:



安装

复制代码
  1. platform :ios, '8.0'
  2. 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 FlyImageSDWebImageUIKit
All Heap Allocations2~7M2~4M 2~5M
All Anonymous VM17~30M310M17~30M

FPS


测试工程: FlyImageIconView / Device: iPhone6 Plus,同屏渲染170张小图,FlyImage顺滑的浏览体验
FlyImageSDWebImageUIKit
58~60FPS6~7FPS6~7FPS 






类图:


  • FlyImageDataFIle 封装了`mmap`的操作,提供高效的I/O文件操作,支持读取、写入、动态扩张文件长度的功能。
  • FlyImageDataFileManager 负责`FlyImageDataFIle`的增加、删除和查找。使用者不能直接实例化`FlyImageDataFIle`,而是需要通过Manager进行这些操作;同时可以获取当前文件夹下文件的数量和占用空间。
  • FlyImageDecoder 解码内存数据,并生成`UIImage`对象。`WebP`格式的转换就在该类中完成。
  • FlyImageEncoder 为`FlyImageIconCache`类服务,将图片绘制到画布上,生成`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+FlyImageCacheCALayer+FlyImageIconCache 为`UIImageView`提供了便捷的分类接口`。  - (void)setImageURL:(NSURL*)url;
  • UIImageView+FlyImageIconCacheCALayer+FlyImageIconCache 提供了便捷的分类接口。- (void)setIconURL:(NSURL*)url;





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






Reference:
1. FastImageCache
2. SDWebImage
3. 认真分析mmap:是什么 为什么 怎么用
级别: 骑士
状态: 连续签到 - [9天]
UID: 448091
精华: 0
发帖: 303
可可豆: 595 CB
威望: 581 点
在线时间: 785(时)
注册时间: 2015-03-11
最后登录: 2018-10-25
1 楼:  发表于: 2016-09-28 12:41    发自: Web Page
mark一下
级别: 骑士
状态: 连续签到 - [1天]
UID: 535935
精华: 0
发帖: 372
可可豆: 520 CB
威望: 517 点
在线时间: 466(时)
注册时间: 2016-01-04
最后登录: 2018-11-01
2 楼:  发表于: 2016-09-28 13:42    发自: Web Page
mark一下
级别: 侠客

状态: 连续签到 - [1天]
UID: 318455
精华: 0
发帖: 107
可可豆: 131 CB
威望: 120 点
在线时间: 173(时)
注册时间: 2014-05-26
最后登录: 2018-10-31
3 楼:  发表于: 2017-01-23 11:19    发自: Web Page
mark一下
小码哥大神班教学视频http://weidian.com/item.html?itemID=19068038
级别: 圣骑士

状态: 连续签到 - [637天]
UID: 552064
精华: 0
发帖: 298
可可豆: 3845 CB
威望: 2570 点
在线时间: 837(时)
注册时间: 2016-03-22
最后登录: 2018-12-17
4 楼:  发表于: 2017-01-23 14:19    发自: Web Page
          
Do your best to meet the best friend!
级别: 新手上路
状态: 连续签到 - [2天]
UID: 421055
精华: 0
发帖: 15
可可豆: 35 CB
威望: 23 点
在线时间: 95(时)
注册时间: 2014-12-24
最后登录: 2018-07-20
5 楼:  发表于: 2018-03-09 13:54    发自: Web Page
根据 key 获取图片,那个key是啥,能说明一下吗?
级别: 新手上路
状态: 连续签到 - [2天]
UID: 421055
精华: 0
发帖: 15
可可豆: 35 CB
威望: 23 点
在线时间: 95(时)
注册时间: 2014-12-24
最后登录: 2018-07-20
6 楼:  发表于: 2018-03-14 17:54    发自: Web Page
框架还有人维护吗????????????有问题求解答呀,楼主
级别: 新手上路
UID: 629999
精华: 0
发帖: 44
可可豆: 143 CB
威望: 143 点
在线时间: 383(时)
注册时间: 2017-12-07
最后登录: 2018-08-17
7 楼:  发表于: 2018-03-14 23:06    发自: Web Page
mark一下
级别: 骑士

状态: 连续签到 - [2天]
UID: 372008
精华: 0
发帖: 230
可可豆: 346 CB
威望: 327 点
在线时间: 1058(时)
注册时间: 2014-09-10
最后登录: 2018-12-17
8 楼:  发表于: 2018-03-15 09:26    发自: Web Page
回 6楼(jinPeng) 的帖子
你应该去github问呀
级别: 新手上路
状态: 连续签到 - [2天]
UID: 421055
精华: 0
发帖: 15
可可豆: 35 CB
威望: 23 点
在线时间: 95(时)
注册时间: 2014-12-24
最后登录: 2018-07-20
9 楼:  发表于: 2018-03-15 11:57    发自: Web Page
滚动快了会崩溃,,,,,,

本站内容均为本站转发,已尽可能注明出处。因未能核实来源或转发内容图片有权利瑕疵的,请及时联系本站,本站会第一时间进行修改或删除。 QQ : 3442093904

描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部