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

如何使用

安装

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的内存

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格式的转换就在该类中完成。
  • 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+FlyImageCache 为UIImageView提供了便捷的分类接口`。
      - (void)setImageURL:(NSURL*)url;
  • UIImageView+FlyImageIconCacheCALayer+FlyImageIconCache 为CALayer提供了便捷的分类接口`。
      - (void)setIconURL:(NSURL*)url;

源代码

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

Reference

  1. FastImageCache
  2. SDWebImage
  3. 认真分析mmap:是什么 为什么 怎么用
时间: 2024-12-22 14:48:08

iOS图片加载新框架 - FlyImage的相关文章

iOS图片加载框架学习之FlyImage

在iOS开发中,其图片加载新框架FlyImage 整合了SDWebImage,FastImageCache,AFNetworking的优点,是一个新的性能高效.接口简单的图片加载框架,下面小编就和大家一起来扒一扒这个框架. 特点 高效 可将多张小图解码后存储到同一张大图上,在同屏渲染多图时,效率极高: 支持 mmap 内存映射,高效的I/O操作,减少一次文件拷贝操作,同时减少内存占用: 支持 Byte Alignment 字节对其,渲染过程中,避免执行 CA::Render::copy_imag

iOS 图片加载框架-SDWebImage 解读

前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序. iOS 图片加载框架-SDWebImage 解读如果之前还未曾用过Vue这个框架的话,建议你可以 加我们QQ群668041364,一起交流学习 起手式:必要的开发环

iOS图片加载到内存中占用内存情况

我的测试结果: 图片占用内存   图片尺寸           .png文件大小 1MB              512*512          316KB 4MB              1024*1024      940KB 16MB            2048*2048      2.5MB 1.11MB         512*568 693KB          320*568          186KB 2.773MB       640*1136        664

iOS图片加载-SDWebImage

一.SDWebImage内部实现过程 1, 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后  SDWebImageManager 根据 URL 开始处理图片. 2, 进入 SDWebImageManager-downloadWithURL:delegate:options:userInfo:,交给 SDImageCache 从缓存查找图片是否已经下载 queryDiskCacheForKey:dele

iOS 图片加载 圆形进度条

项目中有加载网络图片的需求,加一个加载的进度条会提高用户体验,网络不好的时候会清晰的看到图片加载的进度,比让用户看着满屏幕空白好.下面是我们项目自己封装的圆形进度条,分享给大家. 其实实现原理很简单,只是根据图片加载的进度来绘制一个圆. 先来看.h文件,需要一个进度的属性和进度条展示位置的方法: @property (nonatomic, assign) CGFloat progress; +(HMProgressView *)showHMProgressView:(UIView *)paren

iOS图片加载速度极限优化—FastImageCache解析

本文转载至 http://blog.cnbang.net/tech/2578/ FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的. 优化点 iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步骤: 从磁盘拷贝数据到内核缓冲区 从内核缓冲区复制数据到用户空间 生成UIImageView,把图像数据赋值给UIImageView 如果图像数据为未解码的PNG/JPG,解码为位图数据

iOS 图片加载导致内存警告

虽然UITableView和UICollectionView都有cell复用机制,但是如果利用SDWebImage加载的图片本身过大且cell复用池中的个数比较多(cell的Size越小,复用池中的cell就越多), 就容易收到内存溢出的警告!控制台会打印:Received memory warning. ?解决办法:在 didReceiveMemoryWarning方法中释放SDImage的缓存即可!Objective-C: - (void)didReceiveMemoryWarning { 

iOS 图片加载

你还在使用myImage = [UIImage imageNamed:@"icon.png"];吗???!!! 如题,是不是大家为了方便都这样加载图片啊 myImage = [UIImage imageNamed:@"icon.png"]; 那么小心了 这种方法在一些图片很少,或者图片很小的程序里是ok的. 但是,在大量加载图片的程序里,请千万不要这样做. 为什么呢 ??????? 这种方法在application bundle的顶层文件夹寻找由供应的名字的图象 .

iOS开发>学无止境 - 异步图片加载优化与常用开源库分析

作者:罗轩(@luoyibu) 网址:http://www.jianshu.com/p/3b2c95e1404f 1. 网络图片显示大体步骤:   下载图片 图片处理(裁剪,边框等) 写入磁盘 从磁盘读取数据到内核缓冲区 从内核缓冲区复制到用户空间(内存级别拷贝) 解压缩为位图(耗cpu较高) 如果位图数据不是字节对齐的,CoreAnimation会copy一份位图数据并进行字节对齐 CoreAnimation渲染解压缩过的位图 以上4,5,6,7,8步是在UIImageView的setImag