闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter 图片库重磅开源!(中)

简介: 闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter 图片库重磅开源!

接上篇:https://developer.aliyun.com/article/1225988?spm=a2c6h.13148508.setting.15.2f394f0e7JCBdO

五、 整体架构

 

我们将两种解决方案非常优雅地结合在了一起:

 

image.png

我们抽象出了PowerImageProvider,对于external(ffi)、texture,分别生产自己的ImageInfo即可。它将通过对PowerImageLoader的调用,提供统一的加载与释放能力。

 

蓝色实线的ImageExt即为自定义的Image Widget,为texture方式透出了imageBuilder。

 

蓝色虚线ImageCacheExt即为ImageCache的扩展,仅在flutter <2.2.0版本才需要,它将提供ImageCache释放时机的回调。

 

这次,我们也设计了超强的扩展能力。除了支持网络图、本地图、flutter资源、native资源外,我们提供了自定义图片类型的通道,flutter可以传递任何自定义的参数组合给native,只要native注册对应类型loader,比如「相册」这种场景,使用方可以自定义imageType为album,native使用自己的逻辑进行加载图片。有了这个自定义通道,甚至图片滤镜都可以使用PowerImage进行展示刷新。

 

除了图片类型的扩展,渲染类型也可进行自定义。比如在上面ffi中说的,为了降低内存拷贝带来的峰值问题,使用方可以在flutter侧进行解码,当然这需要native图片库提供解码前的数据。

 

六、 数据

 

1. FFI vs Texture

 

image.png


机型:iPhone 11 Pro;

图片:300张网络图;

行为:在listView中手动滚动到底部再滚动到顶部;

native Cache:20 maxMemoryCount

flutter Cache:30MB

flutter version 2.5.3

release模式下

 

这里有两个现象:

 

FFI:186MB波动

Texture:194MB波动

 

在2.5.3版本中,Texture方案与FFI,在内存水位上差异不大,内存波动上面与flutter 1.22结论相反。

 

图中棋格图,为打开checkerboardRasterCacheImages后所展示,可以看出,FFI方案会缓存整个cell,而Texture方案,只有cell中的文字被缓存,RasterCache会使得FFI在流畅度方面会有一定优势。

 

2. 滚动流畅性分析

 

image.png


设备Android OnePlus 8t,CPU和GPU进行了锁频。

CaseGridView每行4张图片,300张图片,从上往下,再从下往上,滑动幅度从500,1000,1500,2000,2500,5轮滑动。重复20次。

方式for i in {1..20}; do flutter drive --target=test_driver/app.dart –profiledone跑数据,获取TimeLine数据并分析。

 

结论

 

UI thread耗时texture方式最好,PowerImage略好于IFImage,FFI方式波动比较大。

 

Raster thread耗时PowerImage好于IFImage。Origin原生方式好是因为对图片resize了,其他方式加载的是原图。

 

3. 更精简的代码

 

dart侧代码有较大幅度的减少,这归功于技术方案贴合flutter原生设计,我们与原生图片共用较多代码。

 

image.png

FFI方案补全了外接纹理的不足,遵循原生Image的设计规范,不仅让我们享受到ImageCache带来的统一管理,也带来了更精简的代码。

 

4. 单测

 

image.png

为了保证核心代码的稳定性,我们有着较为完善的单测,行覆盖率接近95%。

 

 


接下篇:https://developer.aliyun.com/article/1225984?groupCode=idlefish

相关文章
|
22天前
|
设计模式 前端开发 测试技术
Flutter 项目架构技术指南
探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture,以及架构模式MVC、MVP、MVVM,如何有机结合使用,打造优秀的应用架构。
Flutter 项目架构技术指南
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
283 0
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
3月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
62 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
44 1
|
3月前
|
监控 Dart 安全
创建一个Dart应用,监控局域网上网记录的软件:Flutter框架的应用
在当今数字时代,网络安全变得愈发重要。为了监控局域网上的上网记录,我们可以借助Flutter框架创建一个强大的Dart应用。在这篇文章中,我们将深入讨论如何使用Flutter框架开发这样一个监控局域网上网记录的软件,并提供一些实用的代码示例。
271 1
|
6月前
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
|
2月前
|
Dart JavaScript
Flutter - Dart 基础(数据类型)
【2月更文挑战第3天】
30 1
|
2月前
|
Dart JavaScript 安全