深入理解 Flutter 图片加载原理

作者：京东零售 徐宏伟
来源：京东云开发者社区

前言

随着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)

图片加载流程

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

1、 区分数据来源生成缓存列表中数据映射的唯一key；
2、 通过key读取缓存列表中的图片数据；
3、 缓存存在，返回已存在的图片数据；
4、 缓存不存在，按来源加载图片数据，解码后同步到缓存中并返回；
5、 设置回调监听图片数据加载状态，数据加载完成后重新渲染控件显示图片；

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

源码分析

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

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

核心类及方法介绍

启动缓存相关类

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

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

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

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

启动缓存小结：

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）。

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

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

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

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

图像数据加载小结：

上面以网络图像加载流程分析，首先通过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进行数据更新绘制。

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

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

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

图片渲染小结：

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处理等功能。

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

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

大图下载进度自定义显示

图片可拉伸区域设置（.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中图片内存共享方案，我们希望这个增强能力是非侵入式的，我们也在尝试外接纹理等方案，这块技术细节进展将在后续文章中继续和大家一起探讨。

Android 学习笔录

Android 性能优化篇：https://qr18.cn/FVlo89
Android 车载篇：https://qr18.cn/F05ZCM
Android 逆向安全学习笔记：https://qr18.cn/CQ5TcL
Android Framework底层原理篇：https://qr18.cn/AQpN4J
Android 音视频篇：https://qr18.cn/Ei3VPD
Jetpack全家桶篇（内含Compose）：https://qr18.cn/A0gajp
Kotlin 篇：https://qr18.cn/CdjtAF
Gradle 篇：https://qr18.cn/DzrmMB
OkHttp 源码解析笔记：https://qr18.cn/Cw0pBD
Flutter 篇：https://qr18.cn/DIvKma
Android 八大知识体：https://qr18.cn/CyxarU
Android 核心笔记：https://qr21.cn/CaZQLo
Android 往年面试题锦：https://qr18.cn/CKV8OZ
2023年最新Android 面试题集：https://qr18.cn/CgxrRy
Android 车载开发岗位面试习题：https://qr18.cn/FTlyCJ
音视频面试题锦：https://qr18.cn/AcV6Ap

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/92937.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Java基础】Java对象的生命周期

【Java基础】Java对象的生命周期

【Java基础】Java对象的生命周期 一、概述 一个类通过编译器将一个Java文件编译为Class字节码文件&#xff0c;然后通过JVM中的解释器编译成不同操作系统的机器码。虽然操作系统不同&#xff0c;但是基于解释器的虚拟机是相同的。java类的生命周期就是指一个class文件加载到类…
阅读更多...
LeetCode150道面试经典题-- 合并两个有序链表(简单)

LeetCode150道面试经典题-- 合并两个有序链表(简单)

1.题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 2.示例 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输…
阅读更多...
计算机竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类

计算机竞赛 GRU的 电影评论情感分析 - python 深度学习 情感分类

1 前言 &#x1f525;学长分享优质竞赛项目&#xff0c;今天要分享的是 &#x1f6a9; GRU的 电影评论情感分析 - python 深度学习 情感分类 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这…
阅读更多...
【探索Linux】—— 强大的命令行工具 P.3（Linux开发工具 vim）

【探索Linux】—— 强大的命令行工具 P.3（Linux开发工具 vim）

阅读导航 前言vim简介概念特点 vim的相关指令vim命令模式(Normal mode)相关指令插入模式(Insert mode)相关指令末行模式(last line mode)相关指令 简单vim配置&#xff08;附配置链接&#xff09;温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&…
阅读更多...
Go 安装配置

Go 安装配置

介绍Ubuntu20.04 安装和配置Go 1.安装Go 去这个地方下载Go https://go.dev/doc/install 如果之前安装过&#xff0c;可以参考这个&#xff08;没有可以忽略&#xff09; 下载完成后执行 sudo tar -C /usr/local -xzf go1.21.0.linux-amd64.tar.gz 然后修改环境变量 sudo ge…
阅读更多...
GaussDB 实验篇+openGauss的4种1级分区案例

GaussDB 实验篇+openGauss的4种1级分区案例

✔ 范围分区/range分区 -- 创建表 drop table if exists zzt.par_range; create table if not exists zzt.par_range (empno integer,ename char(10),job char(9),mgr integer(4),hiredate date,sal numeric(7,2),comm numeric(7,2),deptno integer,constraint pk_par_emp pri…
阅读更多...
python数据分析需要学哪些,python数据分析要学多久

python数据分析需要学哪些,python数据分析要学多久

大家好&#xff0c;小编为大家解答python数据分析应该学什么软件的问题。很多人还不知道python数据分析需要什么基础&#xff0c;现在让我们一起来看看吧&#xff01; 根据调查结果&#xff0c;十大最常用的数据工具中有八个来自或利用Python。Python广泛应用于所有数据科学领域…
阅读更多...
开发一个RISC-V上的操作系统（八）—— 抢占式多任务（Preemptive Multitasking）

开发一个RISC-V上的操作系统（八）—— 抢占式多任务（Preemptive Multitasking）

目录 一、抢占式多任务 二、代码实现 三、上板测试 本节的代码在仓库的 06_Preemptive_Muti_Task 目录下&#xff0c;仓库链接&#xff1a;riscv_os: 一个RISC-V上的简易操作系统 本文代码的运行调试会在前面开发的RISC-V处理器上进行&#xff0c;仓库链接&#xff1a;cpu_…
阅读更多...
时序预测 | MATLAB实现基于CNN-BiGRU卷积双向门控循环单元的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN-BiGRU卷积双向门控循环单元的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN-BiGRU卷积双向门控循环单元的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于CNN-BiGRU卷积双向门控循环单元的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 MATLAB实现基于…
阅读更多...
Python Opencv实践 - 图像金字塔

Python Opencv实践 - 图像金字塔

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) print(img.shape)#图像上采样 #cv.pyrUp(src, dstNone, dstsizeNone, borderTypeNone) #参考资料&#xff1a;https://blo…
阅读更多...
60页数字政府智慧政务大数据资源平台项目可研方案PPT

60页数字政府智慧政务大数据资源平台项目可研方案PPT

导读&#xff1a;原文《60页数字政府智慧政务大数据资源平台项目可研方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 项目需求分析 项目建设原则和基本策略…
阅读更多...
python做出来的作品,python作品创意简单

python做出来的作品,python作品创意简单

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python做出来的作品&#xff0c;python作品创意简单&#xff0c;今天让我们一起来看看吧&#xff01; Python语言学习-----简易计算器的制作 我是一名普通的大二在校学生&#xff0c;在大二第一学期开设的课程里接触到P…
阅读更多...
selenium语法进阶+常用API

selenium语法进阶+常用API

目录 浏览器操作 浏览器回退&#xff0c;前进 与刷新 浏览器窗口设置大小 浏览器设置宽高 浏览器窗口最大化 浏览器控制滚动条 信息打印 打印页面的标题和当前页面的URL 定位一组元素 鼠标和键盘事件 键盘 鼠标 下拉框操作 通过索引定位&#xff08;se…
阅读更多...
一.RocketMQ概念

一.RocketMQ概念

RocketMQ概念 1.概念2.应用场景3.MQ的优点和缺点4.常见MQ对比 1.概念 MQ(Message Queue)&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息生产、存储、消费全过程API的软件系统。 RocketMQ是阿里巴巴2016年MQ中间件&…
阅读更多...
算法学习总结

算法学习总结

算法总结 文章目录 算法总结搜索遍历dfs树的深度树的重心图的连通块划分 bfs双端队列bfsbfs图问题 迭代加深双向搜索A*IDA*Morris遍历Manacher 数论质数判断质数分解质因数埃氏筛法线性筛法 约数求N的正约数集合——试除法求1~N每个数的正约数集合——倍除法 欧拉函数快速幂快速…
阅读更多...
C语言好题解析（一）

C语言好题解析（一）

目录 选择题1选择题2选择题3选择题4编程题一 选择题1 执行下面程序&#xff0c;正确的输出是&#xff08; &#xff09;int x 5, y 7; void swap() {int z;z x;x y;y z; } int main() {int x 3, y 8;swap();printf("%d,%d\n",x, y);return 0; }A: 5,7 B: …
阅读更多...
2022年工作架构分析

2022年工作架构分析

mpmw自动化流程工具 schema动态数据 Schema 本身是一个JSON &#xff0c;Schema 通过一些特定字段描述和定义 JSON的数据结构。 最常见的表单通过类XML语法定义。一些库支持通过一些特定结构的 JSON (Schema)来生成类XML标签。 formily 是其中实现之一。 表单设计器通过可视…
阅读更多...
TiDB数据库从入门到精通系列之六：使用 TiCDC 将 TiDB 的数据同步到 Apache Kafka

TiDB数据库从入门到精通系列之六：使用 TiCDC 将 TiDB 的数据同步到 Apache Kafka

TiDB数据库从入门到精通系列之六&#xff1a;使用 TiCDC 将 TiDB 的数据同步到 Apache Kafka 一、技术流程二、搭建环境三、创建Kafka changefeed四、写入数据以产生变更日志五、配置 Flink 消费 Kafka 数据 一、技术流程 快速搭建 TiCDC 集群、Kafka 集群和 Flink 集群创建 c…
阅读更多...
三种MMIC放大器偏置电压顺序

三种MMIC放大器偏置电压顺序

HBT自偏置放大器偏置顺序 1、有两种HBT放大器&#xff0c;自偏置和带电流控制的自偏置&#xff0c;下图是HBT自偏置放大器最简单的偏置。这些放大器只需要接通集电极电压。有一个设置电流的偏置电阻。放大器有一个电流反射镜来控制基极电压。 2、 电阻值的计算 3、打开电源并…
阅读更多...
【BASH】回顾与知识点梳理（三十一）

【BASH】回顾与知识点梳理（三十一）

【BASH】回顾与知识点梳理 三十一 三十一. 进程的管理31.1 给进程发送讯号kill -signal PIDlinux系统后台常驻进程killall -signal 指令名称 31.2 关于进程的执行顺序Priority 与 Nice 值nice &#xff1a;新执行的指令即给予新的 nice 值renice &#xff1a;已存在进程的 nice…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023