Flutter 图片选择器和性能测试

  • Post author:
  • Post category:其他




实现

Channel传递的方式跟常见的插件开发类似,就是把 相册 MediaStore的 api能力开放给Flutter,本来是想自己实现一个,翻阅了github,发现已经有类似开源的项目

photo_manager

.

下载代码大概看了下,基本可以满足要求,而且以后还能根据要求继续扩展。其中,安卓的图片加载就是使用Glide来获取字节流。



实现简单图库功能来测试性能。


简单的图库Demo git地址

由于之前对FLutter性能测试还不是很熟悉,刚好借助这机会学习了下。

由于Flutter debug包是使用,JIT,测试性能是不准的,该模式会打开所有的断言(assert),调试信息等,并支持Hot reload(热重载),但是并没有优化代码执行速度、二进制包大小和部署,所以在debug模式下我们会感觉到卡顿,不流畅等问题

只有release包,或者Profile包,才能比较准的性能表现。对应Dart的AOT模式,该模式会关闭所有断言,尽可能多的调试信息。此外还优化了应用快速启动,代码快速执行,以及二进制包的大小,所以在release模式下,才是Flutter真正的实力,非常流畅。

在 Android Studio 和 IntelliJ 使用 Run > Flutter Run main.dart in Profile Mode 选项,可以打出 Profile包进行测试。

(flutter 性能分析)[https://flutter.cn/docs/perf/rendering/best-practices]

https://www.jianshu.com/p/9ff7a9a5dfec

//一些常用命令
//编译APK,
flutter build apk 
//编译独立的三种环境报: arm32, arm64, x86-64
flutter build apk --split-per-abi

//只编译 arm32的包
flutter build apk --target-platform=android-arm


//安装 apk
flutter install

//编译IOS
flutter build ios --no-codesign



Flutter 性能查看工具使用

  • 性能主要是分析两个方面,一是内存使用过程中的内存占用,二是,FPS帧率情况。相关的截图如下:

  • Timeline视图,查看帧率,

  • Memory 视图,查看内存分配情况

  • performance overlay 在手机上实时查看帧率情况,出现红色柱代表掉帧



测试结果:

总体上看,性能比较流畅,在500张图片的手机上测试查看: 内存在图片加载后一直处于稳定状态。高峰 300M,稳定后 250M 左右。

根据Profile的查看,可以看到几点

  1. Flutter 图片内存在 Graphics里面的
  2. 原生的图片内存会分配到 Native中, 图表上Nativite内存一直没有增加, 说明原生并没有持有图片对象
  3. 本机共500张图,使用内存: 241M,说明读取的是图片缩略图
  4. 切换到后台,发现Graphics内存会回收部分。切换到前台,内存又会回升,这个很好理解说明 Image 组件会根据切换前后台事件回收内存
  5. 默认的 ImageCache 可以设置两个属性
//最多缓存容量
const int _kDefaultSize = 1000;
//单张最大字节数
const int _kDefaultSizeBytes = 100 << 20; // 100 MiB



Flutter 图片缓存,内存结构, texture demo



后续优化



参考:



版权声明:本文为GYBIN02原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。