深入理解 Flutter 图片加载原理 | 京东云技术团队

Flutter| 2023-08-17

前言

随着 Flutter 稳定版本逐步迭代更新，京东 APP 内部的 Flutter 业务也日益增多，Flutter 开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验，但随之也带来了一些 OOM 问题，通过线上监控信息和 Observatory 工具结合分析我们发现问题的原因是由于 Flutter 页面中加载的大量图片导致的内存溢出，这也是在原生开发中常见的问题之一，Flutter 官方为我们提供的 Image widget 实现图片加载及显示，只有了解 Flutter 中图片的加载原理及图片内存管理方式才能真正发现问题的本质，本文将重点介绍 Flutter 中图片的加载原理，使用过程中有哪些需要注意的地方及优化思路和手段，希望能给大家带来一些启发和帮助。

基本使用

下面是 Image 的基本使用方法，image 参数是 Image 控件中的必选参数，也是数据源类型可以是 Asset、网络、文件、内存，下面将以我们常用的网络图片加载方式为例子讲解原理，基本使用如下：

Image(


 image: NetworkImage(


     "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),


 width: 100.0,


 heitht: 100.0


)

图11: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

Image 控件的使用方法这里就不在展开了，控件的参数及 API 详情请参阅：https://api.flutter.dev/flutter/widgets/Image-class.html

图片加载流程

Flutter 的图片加载原理与原生客户端中的图片框架加载原理相似，具体可点击下方大图查看，加载步骤如下：

1、区分数据来源生成缓存列表中数据映射的唯一 key；

2、通过 key 读取缓存列表中的图片数据；

3、缓存存在，返回已存在的图片数据；

4、缓存不存在，按来源加载图片数据，解码后同步到缓存中并返回；

5、设置回调监听图片数据加载状态，数据加载完成后重新渲染控件显示图片；

图4: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

大家可能注意到了上面流程图中的文件缓存部分是灰色的，目前官方还不支持此功能，下面我们会通过源码逐步分析加载流程及如何通过修改源码补全文件缓存功能。

源码分析

下面将通过流程图结合 UML 类图分析图片加载流程：

图0: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

这个 UML 类图看起来稍微有点儿复杂，但仔细看会发现已将图片数据加载流程分成几大模块，下面将按照模块进行逐步分析，下面将以网络图片加载方式为例讲解核心类和核心方法功能。

核心类及方法介绍

启动缓存相关类

PaintingBinding：图片缓存类和着色器预加载，该类是基于框架的应用程序启动时绑定到 Flutter 引擎的胶水类，在启动入口 main.dart 的 runApp 方法中创建 WidgetsFlutterBinding 类时被初始化的，通过覆盖父类的 initInstances()方法初始化内部的着色器预加载（Skia 第一次在 GPU 上绘制需要编译相应的着色器，这个过程大概 20ms～200ms）及图片缓存等，图片缓存以单例的方式（PaintingBinding.instance.imageCache）对外提供方法使用，也就是说这个图片缓存在 APP 中是全局的，并在这个类中还提供了图像解码（instantiateImageCodec）、缓存清除（evict）等功能。

图1: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图19: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**ImageCache：**图片缓存类，默认提供缓存最大个数限制 1000 个对象和最大容量限制 100MB，由于图片加载过程是一个异步操作，所以缓存的图片分为三种状态：已使用、已加载、未使用，分别对应三个图片缓存列表，当图片列表超限时会将图片缓存列表中最近最少使用图片进行删除，缓存列表分别是：活跃中图片缓存列表（_cache）、已加载图片缓存列表(_pendingImages)、未活跃图片缓存列表(_liveImages)，并对外提供以下方法：获取缓存（putIfAbsent）、清空缓存（clear、clearLiveImages）、驱逐单个图片（evict）、最大缓存个数限制（maximumSize）、最大缓存大小限制（maximumSizeBytes）等方法。

图12: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

从源码中我们可以看到缓存列表是 Map 类型，Flutter 中的 Map 创建的对象是 LinkedHashMap 是有序的，按键值插入顺序迭代，Flutter 使用 LinkedHashMap 存储图片数据并实现类似 LRU 算法的缓存，当缓存列表中的图片被使用后会将图片数据重新插入到缓存列表的末尾，这样最近最少使用的图片始终会被放在列表的头部。

图17: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

当缓存列表增加图片数据后，会通过最大缓存个数和最大缓存大小两个纬度进行检查缓存列表是否超限，若存在超限情况则通过 Map 的 keys.first 方法获取缓存列表头部最近最少使用的图片对象进行删除，直到满足缓存限制。

图15: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图10: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

启动缓存小结：

Flutter 启动后在 PaintingBinding 中创建 ImageCache 缓存，图片缓存是全局的并以单例方式对外提供使用方法，缓存默认最大个数限制 1000 个对象、最大容量限制 100MB，缓存中的 Map 列表通过 key/value 方式存储图片信息，并通过 keys.first 方法实现的类似 LRU 算法管理图片缓存列表，对外提供 putIfAbsent()方法获取已缓存图像，若缓存中不存在则通过回调图片加载类中的 load()方法加载图片数据，另外图片缓存中还提供 clear()和 evict()方法用来删除缓存。

图片数据加载相关类

**ImageProvider：**图片数据提供抽象类，该类定义了图像数据解析方法（resolve）、唯一 key 生成方法（obtainKey）、数据加载方法（load），obtainKey 和 load 方法均由子类实现，obtainKey 方法生成的对象用于内存缓存的 key 值使用，load 方法将按照不同数据源加载图像数据，常用的 Provider 子类有：NetworkImage、AssetImage、FileImage、MemoryImage，我们可以看到 resolve 方法返回的是图片加载对象类（ImageStream），load 方法返回的是 ImageStreamCompleter 类用来管理图像加载状态及图像数据（ImageInfo）。

图8: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**ImageStreamCompleter：**是一个抽象类，用于管理加载图像对象（ImageInfo）加载过程的一些接口，Image 控件中正是通过它来监听图片加载状态的。

图18: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**ImageStream：**图像的加载对象，可监听图像数据加载状态，由 ImageStreamCompleter 返回一个 ImageInfo 对象用于图像显示

图14: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**NetworkImage：**网络图片加载类，ImageProvider 的实现类，通过 URL 加载网络图像，覆盖 load()方法返回 ImageStreamCompleter 的实现类 MultiFrameImageStreamCompleter，构建该类需要一个 codec 参数类型是 Future<ui.Codec>，通过调用_loadAsync()方法下载网络图片数据获得字节流后通过调用 PaintingBinding.instance.instantiateImageCodec 方法对数据进行解码后获得 Future<ui.Codec>对象，obtainKey 方法我们发现返回的是 SynchronousFuture<NetworkImage>(this)对象，正是 NetworkImage 自己本身，我们通过该类的==方法可以看到判断两个 NetworkImage 类是否相等通过 runtimeType 、url 、scale 这三个参数来判断，所以图片缓存中的 key 相等判断取决于图片的 url、scale、runtimeType 参数。

图6: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**MultiFrameImageStreamCompleter：**是 ImageStreamCompleter 的子类是 Flutter SDK 的预置类，构建该类需要一个 codec 参数类型是 Future<ui.Codec>，Codec 是处理图像编解码器的句柄也是 Flutter Engine API 的包装类，可通过其内部的 frameCount 变量获取图像帧数，分别处理单帧和多帧（动态图）图像，内部的 getNextFrame()方法获取每帧的图像数据并创建 Image 控件中渲染需要的 ImageInfo 数据，调用 onImage 方法将 ImageInfo 返回给 Image 控件。

图9: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图5: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图像数据加载小结：

上面以网络图像加载流程分析，首先通过 ImageProvider 的 resolve()方法创建 ImageStream 对象，obtainKey()方法创建图像缓存列表中的唯一 key（取决于图像 url 和 scale），通过 load()方法加载图像数据并返回 MultiFrameImageStreamCompleter 对象，并将其设置给 ImageStream 中的 setCompleter()方法添加监听图像加载完成状态，图像数据通过 Codec 处理帧数分别处理最终创建 ImageInfo 对象通过 ImageStreamListener 的 onImage 方法返回给 Image 控件。

图片渲染相关类

**_ImageState：**是 Image 控件创建的 State 类，通过调用 ImageProvider 的 resolve()方法解析图片数据，resolve()方法返回的 ImageStream 对象，通过 addListener()增加图片解析状态监听，通过 ImageStreamListener 的 onImage 回调中获取图片数据（ImageInfo）加载完成状态，onChunk 回调监听数据加载进度，onError 监听图片加载错误状态，最终通过调用 setState 进行数据更新绘制。

图16: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

细心的同学会发现 ImageProvider 的实例对象（widget.image）被 ScrollAwareImageProvider 包装了一下又重新创建了一个 provider，在 ScrollAwareImageProvider 内部主要是重写了其中的 resolveStreamForKey()方法，Flutter SDK 1.17 版本中对图片解析增加了快速滚动优化，当判断当前屏幕处在快速滚动状态时，则将图片解析过程延迟下一帧帧尾进行。

图7: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

**RawImage：**RenderObjectWidget 的子类，重写 createRenderObject 方法创建 RenderObject 子类。

**RenderImage：**渲染树中 RenderObject 的实现类，Flutter 的三棵树 Widget、Element、RenderObject ，而 RenderObject 这是负责绘制渲染的，RenderImage 重写 performLayout()方法度量渲染尺寸并布局，重写 paint()方法获取画布 Canvas，Canvas 是记录图片操作的接口类，通过参数处理图片镜像、裁剪、平铺等逻辑后调用的 drawImageNine()和 drawImageRect()方法将图片合成到画布上最终调用 Skia 引擎 API 进行绘制。

图13: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图2: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

图片渲染小结：

Image 控件中通过调用 ImageProvider 的 resolve()方法获取图片数据 ImageInfo 对象，通过 setState 方法将数据更新给图片渲染控件（RenderImage），RenderImage 中重写 paint()方法根据传入参数对图片数据处理后绘制到 Canvas 画布上并调用 Skia 引擎 API 进行绘制。

总结

以上是 Image 图片加载原理及源码分析，那么我们在翻阅了 Image 源码后能做些什么呢？使用过程中有哪些可以优化的部分呢？让我们继续往下看。

图片缓存池大小限制优化

Flutter 本身提供了定制化 Cache 的能力，所以优化 ImageCache 的第一步就是要根据机型的实际物理内存去做缓存大小的适配，通过 PaintingBinding.instance.imageCache 调用的 maximumSize 和 maximumSizeBytes 动态设置合理的图片缓存大小限制避免因图片过多导致 OOM。

未显示图像内存优化

可结合 StatefulWidget 控件生命周期中的 deactive()、dispose()等方法，在页面控件中的图片未显示在屏幕上或控件已销毁时调用图片缓存中的 evict()方法进行资源释放。

图片预缓存处理

Image 控件中提供了 precacheImage()方法可以将需要显示的图片预先加载到 ImageCache 的缓存列表中，缓存列表中通过 key 值区分相同图片，在页面打开后直接从内存缓存获取，可快速显示图片。

图片文件缓存

通过查看网络图片加载类 NetworkImage 源码可以发现，图片数据下载和解码过程都是通过_loadAsync()方法完成的，所以我们可以通过改造这个方法中图片文件下载、读取、保存过程去增加图片文件本地存储、获取原生图片库缓存、图片下载 DNS 处理等功能。

自定义占位图、错误图效果

图3: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

Image 控件中的 frameBuilder 和 errorBuilder 参数分别为我们提供了占位图和错误图的自定义方式，也可使用 FadeInImage 控件提供的占位图（placeholder）、错误图 imageErrorBuilder 等参数，FadeInImage 内部实现也是 Image 控件，感兴趣的同学可以查看其源码实现。

大图下载进度自定义显示

图20: Flutter深入理解 Flutter 图片加载原理 | 京东云技术团队

显示效果：https://flutter.github.io/assets-for-api-docs/assets/widgets/loading_progress_image.mp4

图片可拉伸区域设置（.9 图片）

RenderImage 的 paint 方法中我们发现在调用 Canvas API 绘制前会判断 centerSlice 参数分别调用 drawImageNine()和 drawImageRect()方法，Image 正式通过 centerSlice 参数配置图片的可拉伸区域，参考代码：centerSlice: Rect.fromLTWH(20, 20, 1, 1)，L：横向可拉伸区域左边起始点位置，T：纵向可拉伸区域上边起始点位置，W：横向可拉伸区域宽度，H：纵向可拉伸区域宽度。

未来规划

本文介绍了京东 APP 中 Flutter 探索遇到的问题以及图片的加载原理和使用过程中的一些技巧，随着 Flutter SDK 版本迭代更新，我们将继续对图片加载框架进行优化，原生开发中的多个优秀图片框架已经经历了大量用户的考验这也一直是我们渴望在 Flutter 上复用的能力，所以我们也在积极探索原生和 Flutter 中图片内存共享方案，我们希望这个增强能力是非侵入式的，我们也在尝试外接纹理等方案，这块技术细节进展将在后续文章中继续和大家一起探讨。