从原生到黑科技:闲鱼Flutter图片优化经历了什么?
admin
2021-02-02 12:54:19
0

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

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

那些年

早在闲鱼使用 Flutter 之初,图片就是我们核心关注和重点优化的功能。图片展示体验的好坏会对闲鱼用户的使用体验产生巨大影响。你们是否也曾遇到过:图片加载内存占用过多?使用 Flutter 以后本地资源重复,利用率不高?混合方案下 Flutter 原生图片加载效率不高?

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

原生模式

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

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

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

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

设置图片缓存

没错猜对了,是缓存。对于图片加载,最能想到的方案就是使用缓存。首先原生 Image 的组件是支持自定义图片缓存的,具体的实现类是 ImageCache。ImageCache 的设置维度是两个方向:缓存图片的张数。通过 maximumSize 设置。默认是 1000 张。缓存空间的大小。通过 maximumSizeBytes 来设置。默认值 100M。相比张数的限制,其实大小的设置方式更加符合我们的最终的预期。

相关内容