首页 > 代码库 > iOS图片加载新框架 - FlyImage

iOS图片加载新框架 - FlyImage

2024-08-16 11:04:49   217人阅读

技术分享

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

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

使用 FlyImageCache

1
2
3
4
5
6
7
8
9
// 通过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的内存

MemoryFlyImageSDWebImageUIKit
All Heap Allocations2~7M2~4M2~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+FlyImageCache, CALayer+FlyImageCache 为UIImageView提供了便捷的分类接口`。

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

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

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

源代码

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

Reference

  1. FastImageCache

  2. SDWebImage

  3. 认真分析mmap：是什么 为什么 怎么用

  4.  

iOS图片加载新框架 - FlyImage


联系
我们