iOS图片加载新框架 - FlyImage
waming@163.com
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/ffc9e75165a67869ed7c7e527bea17c5.png"></p> <p>FlyImage 整合了SDWebImage，FastImageCache，AFNetworking的优点，是一个新的性能高效、接口简单的图片加载框架。</p> <h2><strong>特点</strong></h2> <ul> <li> <p><strong>高效</strong></p> <ol> <li> <p>可将多张小图解码后存储到同一张大图上，在同屏渲染多图时，效率极高；</p> </li> <li> <p>支持 mmap 内存映射，高效的I/O操作，减少一次文件拷贝操作，同时减少内存占用；</p> </li> <li> <p>支持 Byte Alignment 字节对其，渲染过程中，避免执行 CA::Render::copy_image 内存操作；</p> </li> </ol> </li> <li> <p><strong>接口简单</strong></p> <ol> <li> <p>支持 UIImageView , CALayer Category；</p> </li> <li> <p>不用考虑小图片尺寸，简单的存储和读取接口；</p> </li> <li> <p>一套方案同时解决单张大图和多张小图的两种业务场景；</p> </li> </ol> </li> <li> <p>WebP高效的图片压缩方式；</p> </li> <li> <p>异步下载支持下载进度Block，方便实现自定义的下载动画；</p> </li> </ul> <h2><strong>流行框架对比</strong></h2> <p>现在iOS上比较流行的两套图片加载框架：</p> <ul> <li> <p>SDWebImage 提供了从下载到渲染一整套的解决方案，同时支持Category特性，WebP格式，使用起来非常简单；但是同屏多张小图快速滚动时，界面就会很明显的卡顿；</p> </li> <li> <p>FastImageCache Path推出的，非常适合于小图片的高效渲染，内部优化了I/O读取，解码时支持 Byte Alignment 减少内存拷贝，同时仅需一次解码，可以说是做到了极度优化。但是FIC有两大缺点：</p> <ul> <li> <p>为了精简代码，从1.2以后取消图片下载功能；</p> </li> <li> <p>接口非常难用，使用时还需要指定 FICImageFormat ，每个Format中的图片size必须保持一致，同时每张图片需要与 [FICEntity 绑定，我仅仅是想快速展示多个icon而已...</p> </li> </ul> </li> </ul> <p>基于上述的分析，如果有一个图片库可以将两者的优点结合在一起，那该多好！ FlyImage 就是基于此想法诞生的，新的库整合了 FastImageCache 的优化方案，同时让接口变得更加易用。</p> <p>FlyImage 可以在一个文件中绘制多张不同size的小图片，存储和获取时只需要一个固定的 key ；同时将内存映射的方法应用到大图片的显示方案中，减少内存的拷贝次数，加快读取速度。具体的使用方法如下：</p> <h2><strong>如何使用</strong></h2> <p>安装</p> <pre> <code class="language-objectivec">platform :ios, '8.0'pod 'FlyImage', '~>1.0'</code></pre> <p>使用 UIImageView/CALayer</p> <pre> <code class="language-objectivec">UIImageView *iconView = [[UIImageView alloc] initWithFrame:frame]; [iconView setIconURL:[NSURL urlWithString:@"http://original"]]; []self.view addSubview:iconView];</code></pre> <p>使用 FlyImageCache</p> <pre> <code class="language-objectivec">// 通过Key获取单张图片 [[FlyImageCache sharedInstance] asyncGetImageWithKey:key completed:^(NSString *key, UIImage *image) { imageView.image = image; }]; // 删除一张图片 [[FlyImageCache sharedInstance] removeImageWithKey:key]; // 清除所有图片 [[FlyImageCache sharedInstance] purge];</code></pre> <p>使用 FlyImageIconCache</p> <pre> <code class="language-objectivec">// 添加一张小图[[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; }];</code></pre> <h2><strong>性能</strong></h2> <p>Memory</p> <p>测试工程: FlyImageView / Device: iPhone6 Plus，滚动列表中连续显示多张大图，FlyImage不会增加Image IO的内存</p> <table> <thead> <tr> <th>Memory</th> <th>FlyImage</th> <th>SDWebImage</th> <th>UIKit</th> </tr> </thead> <tbody> <tr> <td>All Heap Allocations</td> <td>2~7M</td> <td>2~4M</td> <td>2~5M</td> </tr> <tr> <td>All Anonymous VM</td> <td>17~30M</td> <td>310M</td> <td>17~30M</td> </tr> </tbody> </table> <p>FPS</p> <p>测试工程: FlyImageIconView / Device: iPhone6 Plus，同屏渲染170张小图，FlyImage顺滑的浏览体验</p> <table> <thead> <tr> <th>FlyImage</th> <th>SDWebImage</th> <th>UIKit</th> </tr> </thead> <tbody> <tr> <td>58~60FPS</td> <td>6~7FPS</td> <td>6~7FPS</td> </tr> </tbody> </table> <p style="text-align:center"><img src="https://simg.open-open.com/show/db2999fac4a4bf6e9bd9265dd9322da7.jpg"></p> <p>同屏多图</p> <p>类图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e7249d55e948a9af65e08d4f8a8bbf8e.jpg"></p> <ul> <li> <p><strong>FlyImageDataFIle</strong>封装了 mmap 的操作，提供高效的I/O文件操作，支持读取、写入、动态扩张文件长度的功能。</p> </li> <li> <p><strong>FlyImageDataFileManager</strong>负责 FlyImageDataFIle 的增加、删除和查找。使用者不能直接实例化 FlyImageDataFIle ，而是需要通过Manager进行这些操作；同时可以获取当前文件夹下文件的数量和占用空间。</p> </li> <li> <p><strong>FlyImageDecoder</strong>解码内存数据，并生成 UIImage 对象。 WebP 格式的转换就在该类中完成。</p> </li> <li> <p><strong>FlyImageEncoder</strong>为 FlyImageIconCache 类服务，将图片绘制到画布上，生成 bitmap 格式。</p> </li> <li> <p><strong>FlyImageCache</strong>负责图片的增加、删除和查找。每个图片都对应一个 key ，这些信息都会被保存在一个 meta 文件中。当该类被实例化后就会自动创建或自动获取该 meta 文件，可以指定不同的 meta 文件路径。在实际使用过程中，App会提供清除当前缓存的操作，但是又想将一些必要的图片保留，比如当前用户的头像和未发布的草稿图片等，针对这个需求， FlyImageCache 提供了便捷的接口 - (void)protectFileWithKey:(NSString*)key; 和 - (void)unProtectFileWithKey:(NSString*)key; 操作，处于 protect 状态的图片即使在执行 purge 操作时也不会被清除。</p> </li> <li> <p><strong>FlyImageIconCache</strong>负责小图片的增加、删除、替换和查找。和 FlyImageCache 接口基本一致，只不过该类只维护一个 FlyImageDataFIle 事例，所有小图片解码后都会存放在该文件中。当然你也可以创建多个实例，将经常一同使用的小图片放在一个 FlyImageDataFIle 中。</p> </li> <li> <p><strong>FlyImageDownloader</strong>负责下载图片，注意该类并不负责存储。在发起一个下载请求后，会得到一个类型为 FlyImageDownloadHandlerId 的标识符，如果图片被移出当前显示区域后，可以调用 - (void)cancelDownloadHandler:(FlyImageDownloadHandlerId*)handlerId; 移除该下载请求，节省资源。</p> </li> <li> <p><strong>UIImageView+FlyImageCache,</strong> <strong>CALayer+FlyImageCache</strong> 为 UIImageView 提供了便捷的分类接口`。</p> <pre> <code class="language-objectivec"> - (void)setImageURL:(NSURL*)url;</code></pre> </li> <li> <p><strong>UIImageView+FlyImageIconCache, </strong> <strong>CALayer+FlyImageIconCache</strong> 为 CALayer 提供了便捷的分类接口`。</p> <pre> <code class="language-objectivec"> - (void)setIconURL:(NSURL*)url;</code></pre> </li> </ul> <p> </p> <p> </p> <p> </p> <p> </p>