zoukankan      html  css  js  c++  java
  • iOS图片加载新框架

    1.png

    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 Allocations 2~7M 2~4M 2~5M
    All Anonymous VM 17~30M 310M 17~30M

    FPS

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

    FlyImageSDWebImageUIKit
    58~60FPS 6~7FPS 6~7FPS

    2.jpg

    同屏多图

    类图

    3.jpg

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

  • 相关阅读:
    嵌入式为什么要用Linux操作系统
    SPI 协议的理解
    跳转某指定地址、给某绝对地址赋值
    define 宏定义
    笔试--编程题
    spring 技巧集锦
    spring data jpa auditing
    spring security
    Python基础笔记
    调试EF源代码环境配置
  • 原文地址:https://www.cnblogs.com/CoderLFYue/p/5954520.html
Copyright © 2011-2022 走看看