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:是什么 为什么 怎么用

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

  1. iOS 图片加载速度优化

    FastImageCache 是 Path 团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的. 一.优化点 iOS 从磁盘加载一张图片,使用 UI ...

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

    我的测试结果: 图片占用内存   图片尺寸           .png文件大小 1MB              512*512          316KB 4MB              10 ...

  3. iOS图片加载框架-SDWebImage解读

    在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...

  4. iOS 图片加载框架- SDWebImage 解读

    在iOS的图片加载框架中,SDWebImage可谓是占据大半壁江山.它支持从网络中下载且缓存图片,并设置图片到对应的UIImageView控件或者UIButton控件.在项目中使用SDWebImage ...

  5. iOS 图片加载和处理

    一.图片显示 图片的显示分为三步:加载.解码.渲染.解码和渲染是由 UIKit 进行,通常我们操作的只有加载. 以 UIImageView 为例.当其显示在屏幕上时,需要 UIImage 作为数据源. ...

  6. Android开发三种第三方图片加载的框架

    最近在项目中用到了大量图片加载,第三方优秀框架还不错,下面介绍三款榜首的框架用法和问题,做一个记录. 现在项目使用的是Android Studio开发的,现在也没有多少人使用Eclipse了吧. 一. ...

  7. Android之Fresco(facebook的强大Android图片加载的框架)

    Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络.本地存储和本地资源中加载图片.其中的Drawees可以显示占位符,直到图片加载完成.而当图片从屏幕 ...

  8. iOS图片加载-SDWebImage

    一.SDWebImage内部实现过程 1, 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后  SDWeb ...

  9. 037 Android Glide图片加载开源框架使用

    1.Glide简单介绍 Glide是一款由Bump Technologies开发的图片加载框架,使得我们可以在Android平台上以极度简单的方式加载和展示图片.Glide是一个快速高效的Androi ...

随机推荐

  1. ios异常(crash)输出

    最近突然想起友盟的sdk附带的一个功能:将闪退异常情况上报服务器,(stackflow,github)找了一些资料,自己写了一个demo,想起来好久没有写过blog了,顺便分享. 其实不止是ios,a ...

  2. java实验2实验报告(20135131)

    一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计模式 二.实验要求 1.没有L ...

  3. 关于yaha中文分词(将中文分词后,结合TfidfVectorizer变成向量)

    https://github.com/jannson/yaha # -*- coding: utf-8 -*- """ Created on Wed Aug 10 08: ...

  4. linux C学习笔记04--内存映射

    内存映射代码,打开一个文件与映射到内存中,对内存和文件的修改都会反映到文件中来,反之亦然,先贴代码,以后再完善: /****************************************** ...

  5. java与微信企业号交互

    微信企业号接收消息(使用SpringMVC): http://blog.csdn.net/omsvip/article/details/39480577 微信企业号api: http://qydev. ...

  6. console.log的应用

    这两天在学javascript,但是有个问题老是觉得很疑惑,那就是这两个表达式到底有啥区别,虽然结果输出都差不多,但是我想这个两个表达式被开发出来,肯定是有意义的吧!哪位高手解答下吧!Thanks i ...

  7. JQuery Object vs. DOM element

    JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法.其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML D ...

  8. Tlist

    Tlist (Classes.pas) 在我刚开始接触TList的时候,TList搞得我迷雾重重,都是Capacity属性惹的祸.我查了Delphi的帮助,它说Capacity是TList的最大容量, ...

  9. cadence学习之原理图——连线

    重点: (1)两种连接方式:Place Net和Place Net Alias (2)交叉线之间的电气连接Place Junction (3)引脚悬空 Place no connect (4)两器件管 ...

  10. android Studio项目运行时报错“Could not identify launch activity: Default Activity not found”

    出现红色的小叉叉,有点蒙圈的感觉 其实只是因为AndroidManifest.xml里面没有设置运行初始的activity <activity android:name=".MainA ...