个人购物网站建设,义务教育标准化建设网站,湖南网站推广多少钱,wordpress上传图片慢前言
随着Flutter稳定版本逐步迭代更新#xff0c;京东APP内部的Flutter业务也日益增多#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验#xff0c;但随之也带来了一些OOM问题#xff0c;通过线上监控信息…前言
随着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?s460v4),width: 100.0,heitht: 100.0)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KUVb1KO3-1692167245031)(https://mp.toutiao.com/mp/agw/article_material/open_image/get?codeZWJmMDc2ZWExNTA4ZTA0OTEyOTM3NTk1N2FiYWY4ZDksMTY5MjE1NDI4NzM0OQ)]
Image 控件的使用方法这里就不在展开了控件的参数及API详情请参阅https://api.flutter.dev/flutter/widgets/Image-class.html
图片加载流程
Flutter 的图片加载原理与原生客户端中的图片框架加载原理相似具体可点击下方大图查看加载步骤如下
1、 区分数据来源生成缓存列表中数据映射的唯一key
2、 通过key读取缓存列表中的图片数据
3、 缓存存在返回已存在的图片数据
4、 缓存不存在按来源加载图片数据解码后同步到缓存中并返回
5、 设置回调监听图片数据加载状态数据加载完成后重新渲染控件显示图片 大家可能注意到了上面流程图中的文件缓存部分是灰色的目前官方还不支持此功能下面我们会通过源码逐步分析加载流程及如何通过修改源码补全文件缓存功能。
源码分析
下面将通过流程图结合UML类图分析图片加载流程 这个UML类图看起来稍微有点儿复杂但仔细看会发现已将图片数据加载流程分成几大模块下面将按照模块进行逐步分析下面将以网络图片加载方式为例讲解核心类和核心方法功能。
核心类及方法介绍
启动缓存相关类
PaintingBinding图片缓存类和着色器预加载该类是基于框架的应用程序启动时绑定到Flutter引擎的胶水类在启动入口main.dart的runApp方法中创建WidgetsFlutterBinding类时被初始化的通过覆盖父类的initInstances()方法初始化内部的着色器预加载Skia第一次在GPU上绘制需要编译相应的着色器这个过程大概20ms200ms及图片缓存等图片缓存以单例的方式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、数据加载方法loadobtainKey 和load方法均由子类实现obtainKey方法生成的对象用于内存缓存的key值使用load方法将按照不同数据源加载图像数据常用的Provider子类有NetworkImage、AssetImage、FileImage、MemoryImage我们可以看到resolve方法返回的是图片加载对象类ImageStreamload方法返回的是ImageStreamCompleter类用来管理图像加载状态及图像数据ImageInfo。 **ImageStreamCompleter**是一个抽象类用于管理加载图像对象ImageInfo加载过程的一些接口Image控件中正是通过它来监听图片加载状态的。 **ImageStream**图像的加载对象可监听图像数据加载状态由ImageStreamCompleter返回一个ImageInfo对象用于图像显示 **NetworkImage**网络图片加载类ImageProvider的实现类通过URL加载网络图像覆盖load()方法返回ImageStreamCompleter的实现类MultiFrameImageStreamCompleter构建该类需要一个codec参数类型是Futureui.Codec通过调用_loadAsync()方法下载网络图片数据获得字节流后通过调用PaintingBinding.instance.instantiateImageCodec方法对数据进行解码后获得Futureui.Codec对象obtainKey方法我们发现返回的是SynchronousFuture(this)对象正是NetworkImage 自己本身我们通过该类的方法可以看到判断两个NetworkImage类是否相等通过runtimeType 、url 、scale 这三个参数来判断所以图片缓存中的key相等判断取决于图片的url、scale、runtimeType参数。 **MultiFrameImageStreamCompleter**是ImageStreamCompleter的子类是Flutter SDK的预置类构建该类需要一个codec参数类型是Futureui.CodecCodec 是处理图像编解码器的句柄也是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()方法获取画布CanvasCanvas是记录图片操作的接口类通过参数处理图片镜像、裁剪、平铺等逻辑后调用的drawImageNine()和drawImageRect()方法将图片合成到画布上最终调用Skia引擎API进行绘制。 图片渲染小结
Image控件中通过调用ImageProvider的resolve()方法获取图片数据ImageInfo对象通过setState方法将数据更新给图片渲染控件RenderImageRenderImage中重写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控件感兴趣的同学可以查看其源码实现。
大图下载进度自定义显示 显示效果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中图片内存共享方案我们希望这个增强能力是非侵入式的我们也在尝试外接纹理等方案这块技术细节进展将在后续文章中继续和大家一起探讨。
参考资料
1、http://storage.360buyimg.com/pub-image/Image-source.jpg
2、https://book.flutterchina.club/chapter14/image_and_cache.html
3、https://api.flutter-io.cn/flutter/painting/ImageCache-class.html 作者京东零售 徐宏伟 来源京东云开发者社区
