从原生到黑科技：闲鱼 Flutter 图片优化经历了什么？

简介：阿里妹导读：图片加载是 APP 最常见也最基本的功能，也是影响用户体验的因素之一。在看似简单的图片加载背后却隐藏着很多技术难题。本文介绍闲鱼技术团队在 Flutter 图片优化上所做的尝试，分享闲鱼在典型的图片处理方案上的技术细节，希望给大家带来一些启发。

那些年

早在闲鱼使用 Flutter 之初，图片就是我们核心关注和重点优化的功能。图片展示体验的好坏会对闲鱼用户的使用体验产生巨大影响。你们是否也曾遇到过：

• 图片加载内存占用过多？
• 使用 Flutter 以后本地资源重复，利用率不高？
• 混合方案下 Flutter 原生图片加载效率不高？

针对上述问题，从第一版 Flutter 业务上线开始，闲鱼对图片框架的优化就从未停止。从开始的原生优化，到后面黑科技的外接纹理；从内存占用，到包大小；文本会逐一介绍。希望其中的优化思路和手段，能给大家带去一些启发。

原生模式

从技术层面看图片加载，其实简单来说，追求的是无非是加载的效率的最大化——用尽可能小的资源成本，尽可能快地加载尽可能多的图片。

闲鱼图片的第一个版本其实基本上是纯原生的方案。如果你不想魔改很多底层的逻辑，原生方案肯定是最简单和经济的方案。原生方案的功能模块如下：

如果你啥都没做直接上了，那么你可能会发现效果并没有达到你预期的那么美好。那么如果从原生的方案入手，我们有哪些具体的优化手段呢？

设置图片缓存

没错猜对了，是缓存。对于图片加载，最能想到的方案就是使用缓存。首先原生 Image 的组件是支持自定义图片缓存的，具体的实现类是 ImageCache。ImageCache 的设置维度是两个方向：

• 缓存图片的张数。通过 maximumSize 设置。默认是 1000 张。
• 缓存空间的大小。通过 maximumSizeBytes 来设置。默认值 100M。相比张数的限制，其实大小的设置方式更加符合我们的最终的预期。

通过合理设置 ImageCache 的大小，能充分利用缓存机制加速图片加载。不仅如此，闲鱼在这个点上还做了额外两个重要优化：

低端手机适配

在上线以后，我们陆续收到线上舆情的反馈，发现全部机型设置同一个缓存大小的做法并非最优。特别是大缓存设置在低端机器上面，不仅会出现体验变差，甚至还会影响稳定性。基于实际情况，我们实现了一个能从 Native 侧获取机器基础信息的 Flutter 插件。通过获取的信息，我们根据不同手机的配置设置不同的缓存策略。在低端机器上面适当降低图片缓存的大小，同时在高端手机上将其适当放大。这样能在不同配置的手机上获取最优的缓存性能。

磁盘缓存

熟悉 APP 开发的同学都知道，成熟的图片加载框架一般都有多级缓存。除了常见的内存缓存，一般都会配置一个文件缓存。从加载效率上来说，是通过空间换时间，提升加载速度。从稳定性来说，这又不会过分占用宝贵的内存资源，出现 OOM。但是可惜的是，Flutter 自带的图片加载框架并没有独立的磁盘缓存。所以我们在原生方案的基础上扩展了磁盘缓存能力。

在具体的架构实现上，我们并没有完全自己撸一个磁盘缓存。我们的策略还是复用现有能力。首先我们将 Native 图片加载框架的磁盘缓存的功能通过接口暴露出来。然后通过桥接的方式，将 Native 磁盘缓存能力嫁接到 Flutter 层。Flutter 侧进行图片加载的时候，如果内存没有命中，就去磁盘缓存中进行二次搜索。如果都没有命中才会走网络请求。

通过增加磁盘缓存，Flutter 图片加载效率进一步提升。

<