FastImageCache 架构分析

原文

文章介绍

本文章注重分析 FastImageCache 这个 Github 第三方图片IO库的架构和部分分析等等。

对于 FastImageCache 很多同学或多或少都会听过,但是网上很多人说这是一个网络图片库,我只想说一句——"你们是来搞笑的吗?有用过吗?有看过一点点源码吗?", 这个图片库跟网络半毛钱关系都没有,如果真的用过一点点示例的,根本不会说出这句话。

FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动起来更顺畅,来看看它是怎么做的。

加载图片过程

iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步骤:

  1. 用户应用程序调用 read() 函数尝试从物理内存/高速缓存中读取图像数据

  2. CPU 模式切换为内核模式,内核应用程序尝试从物理内存/高速缓存中读取图像数据,如果存在则走步骤 3,如果不存在则引起缺页异常,由内核中的缺页异常处理程序确定物理内存中的牺牲页,将磁盘页作为新页调入到物理内存中,更新内存中的页表条目PTE,缺页异常处理程序返回用户应用程序,重新走第 1 步。(关于这部分知识可查看阅读CSAPP——虚拟内存篇)

  3. 内核应用程序将图片数据放在内核缓冲区,从内核缓冲区复制数据到用户空间。(关于内核态和用户态的知识,可查看阅读CASPP——进程篇)

  4. 创建 UIImageView,把图像数据赋值给 UIImageView

  5. 如果图像数据为未解码的PNG/JPG,解码为位图数据

  6. CATransaction捕获到UIImageView layer树的变化

  7. 主线程Runloop提交CATransaction,开始进行图像渲染

6.1 如果数据没有字节对齐,Core Animation会再拷贝一份数据,进行字节块对齐。

6.2 GPU处理位图数据,进行渲染。

FastImageCache 分别优化了 3,5,7.1三个步骤:

  1. 使用mmap内存映射函数,省去了上述第3步数据从内核空间拷贝到用户空间和内核态的操作和用户态之间的切换消耗。

  2. 缓存解码后的位图数据到磁盘,下次从磁盘读取时省去第5步解码的操作。

  3. 生成字节块对齐的数据,防止上述第7.1步CoreAnimation在渲染时再拷贝一份数据。

接下来具体介绍这三个优化点以及它的实现。

内存映射

什么是用户态和内核态?

用户模式和内核模式

上面这篇博客讲解了用户态和用户态不过是为了防止用户恶意操作操作系统中的数据和硬件而建立的CPU模式机制。这样当用户应用程序想要访问硬件设备的时候,都要进入内核态(一个内存地址空间跟用户态完全不一样的环境,这里可能会发生进程切换,但大部分情况是不会的)。

那么使用了 mmap 函数后会优化了什么?

关于mmap, 内存映射

说白了 mmap 就是将磁盘内存地址跟应用程序的虚拟地址一一对应的操作,在真正使用到这些数据前却不会消耗物理内存,也不会有读写磁盘的操作,只有真正使用这些数据时,也就是图像准备渲染在屏幕上时,虚拟内存管理系统VMS才根据缺页加载的机制从磁盘加载对应的数据块到物理内存,再进行渲染,让我们对文件的读写都可以直接在用户态进行,省去了用户态和内核态的切换和缓冲区之间的内存拷贝。(在 Linux 中通常用于多进程访问同一数据的时候进行共享内存的创建,这样就不用多次拷贝内核缓冲区字节到不同的应用程序当中,而且写入数据都能同步到不同的进程)

解码图像

一般我们使用的图像是JPG/PNG,这些图像数据不是位图,而是是经过编码压缩后的数据,使用它渲染到屏幕之前需要进行解码转成位图数据,这个解码操作是比较耗时的,并且没有GPU硬解码,只能通过CPU,iOS默认会在主线程对图像进行解码。很多库都解决了图像解码的问题,不过由于解码后的图像太大,一般不会缓存到磁盘,SDWebImage的做法是把解码操作从主线程移到子线程,让耗时的解码操作不占用主线程的时间。

FastImageCache也是在子线程解码图像,不同的是它会缓存解码后的图像到磁盘。因为解码后的图像体积很大,FastImageCache对这些图像数据做了系列缓存管理,详见下文实现部分。另外缓存的图像体积大也是使用内存映射读取文件的原因,小文件使用内存映射无优势,内存拷贝的量少,拷贝后占用用户内存也不高,文件越大内存映射优势越大。

Data Alignment 字节块对齐

iOS高效图片 IO 框架是如何炼成的 中有讲到为何需要字节对齐,而且字节对齐的实现等等。

FastImageCache 架构实现

通过阅读 FastImageCache 后,粗略的画出了以下这幅流程图,途中标识着这个框架的要获取图片的整体流程如何实现:

image.png

那么 FastImageCache 是如何实现上述流程的呢?

关于的总体结构如下图:

image.png

上图中 ImageCache 是一个单例,用作管理整个图片框架系统。

FastImageCache 为了更好的读存图片数据,将所有图像字节大小相同的图片都放在一起,也就是所有格式相同的图片都放在同一个文件系统当中(这个后面会讲到),而在 FastImageCache 中,imageFormat 分为 4 种格式:


FICImageFormatStyle32BitBGRA,

FICImageFormatStyle32BitBGR,

FICImageFormatStyle16BitBGR,

FICImageFormatStyle8BitGrayscale,

  • ImageTable:每一种格式都对应一个 ImageTable 结构体,一个 ImageTable 更是一个真实的文件,可以叫做一个真实的文件系统,命名为 xxx.table 文件放在沙盒的 Cache 文件夹当中。

  • ChunkImageTable拥有多个 Chunk,而 Chunk 被设置为 2M 大小的内存块,存在于 ImageTable 文件系统中,获取的时候通过内存映射 mmap 作为共享内存映射到用户空间的虚拟内存当中。

  • EntryChunk存在着多个Entry, 因为操作系统当中访问磁盘,都是以磁盘页和内存页的方式存在于磁盘和物理内存当中,在 64 位 Unix操作系统中,一般为 4KB,这个大小可以通过设置操作系统更改,所以 Entry 为了加快访问数据字节访问获取速度和节省由于页不对齐而导致的 CPU 周期增加的消耗,就采用页对齐的方式。

Entry 中存储着一个图片的字节数组,和 Meta(ImageCache用到的一些 UUID 的唯一图片标识),而 ImageData 为了避免发生 copy_images 的发生,更是采用了字节块对齐。

而这些实现细节,可以查看iOS高效图片 IO 框架是如何炼成的

文献参考:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269