AliFlutter 图片解决方案与优化
如果无法正常显示，请先停止浏览器的去广告插件。
1. AliFlutter 图⽚解决⽅案与优化
讲师：王乾元(花名：神漠)
2. 个⼈介绍
• 王乾元，花名神漠。淘系技术部⽆线开发专
家。
• 13年加⼊阿⾥，先后负责过天猫、⽀付宝、⼿
机淘宝App的iOS架构⼯作。
• ⽬前在AliFlutter团队负责中间件，iOS架构，
Canvas开发；以及引擎底层、⼯具链等⽅⾯的
研究。
3. 你将会了解到
• Flutter 是如何加载、显示图⽚的；线程、缓存设计上有什么特点 。
• AliFlutter 图⽚⽅案的特点，解决了哪些问题，以及在哪些⽅⾯做了优化。
• 如何选择最适合⾃⼰应⽤的图⽚⽅案。
4. Flutter如何加载显示图⽚
Flutter的线程们
•
•
图⽚在WorkerThread完成解码
图⽚在IO Thread上传到IOManager的ShareContext
中，⽣成纹理
纹理可以在GPU Thread被使⽤
纹理被Dart层的ui.Image对象通过引⽤计数管理，底
层Context不再做缓存。
Platform Thread 平台交互 UI Thread Dart，渲染控制 IO Thread 图⽚上传GPU IO Context ShellIOManager
GPU Thread GPU调⽤ GPU Context 纹理对象 ui.Image
Worker Thread
(Concurrent) 图⽚解码 Share Group
《深⼊理解Flutter引擎线程模式》
•
•
5. Flutter如何加载显示图⽚
widgets/image.dart
painting/image_cache.dart
painting/image_stream.dart
rendering/image.dart
painting/_network_image_io.dart
engine/painting/codec.cc
instantiateImageCodec
6. 我们遇到的问题
•
•
•
•
• 电商场景，图⽚多，性能要求⾼；
需要与Native图⽚库对接，共享缓存、CDN能⼒以及监控设施；
使⽤简单
扩展能⼒强，⽀持⼩程序、Canvas等多种场景；
需要与官⽅体系尽可能融合。
•
•
• 原⽣图⽚管理能⼒⽐较弱，缺乏本地缓存；
⾼并发，图⽚多的场景，性能较差；
⽆法⽀持基于Flutter Canvas的场景。
7. AliFlutter图⽚⽅案总体架构
Image Widget
List Widget
⼀致性
与官⽅体系⽆缝融合
Framework
(Dart)
Provider
Stream
Cache
⾼性能
Render Image
Dart UI
(Dart)
Adapter
(ObjC, Android)
Engine
优化CPU、内存占⽤；
增强List回收
易⽤性
Codec
(C++)
Native Image Library
适配简单、使⽤简单、
易扩展
8. AliFlutter⽅案
painting/_external_adapter_image_io.dart
engine/external_adapter_image_codec.cc
9. ⼀次完整图⽚加载过程时序图
10. 性能优化
•
延迟加载
• 列表快滑时，直接减少⽆效图⽚请求；
•
图⽚取消
CPU
• ⽹络慢，纹理上传过程多次切换线程，过程中图⽚可能不再被需要；
•
解码并发控制
• 降低图⽚到GPU纹理过程临时内存峰值；
•
GIF逐帧上传纹理
• 降低GIF播放过程内存峰值；
•
增强List回收能⼒
• 解决⼤Cell问题，图⽚离屏纹理即回收。
内存
11. 适配与使⽤
Objective-C
Java
public interface ExternalAdapterImageProvider {
public interface Request {
public abstract void cancel();
}
@protocol FlutterExternalAdapterImageRequest <NSObject>
- (void)cancel;
@end
public interface Response {
public abstract void finish(Image image);
}
@protocol FlutterExternalAdapterImageProvider <NSObject>
- (id<FlutterExternalAdapterImageRequest>)request:(NSString*)url
targetWidth:(NSInteger)targetWidth
targetHeight:(NSInteger)targetHeight
parameters:(NSDictionary<NSString*, NSString*>*)parameters
extraInfo:(NSDictionary<NSString*, NSString*>*)extraInfo
callback:(void (^)(UIImage* image))callback;
@end
public abstract Request request(String url,
int targetWidth,
int targetHeight,
Map<String, String> parameters,
Map<String, String> extraInfo,
Response response
);
}
Dart
Image.externalAdapter(
'https://gw.alicdn.com/tfs/TB1Aa0UcF67gK0jSZPfXXahhFXa-750-140.png',
placeholderProvider: AssetImage(“assets/placeholder.jpg"),
targetWidth: 375,
targetHeight: 375,
);
12. 增强List回收能⼒
优化前
https://item.taobao.com/item.htm?
spm=a219r.lm874.14.19.3d734ec5Y0TjZp&id=60207
6608763&ns=1&abbucket=5#detail
优化后
Flutter，打开左边链接中的商品，向下滑动显示商品详情
13. 增强List回收能⼒——Flutter List特点
Cell2没有添加RepaintBoundary
14. 增强List回收能⼒
15. 增强List回收能⼒
绘制时判断图⽚是否在屏，回调通知
List对指定Cell不添加RepaintBoundary
16. 增强List回收能⼒
Image Codec获取图⽚尺⼨，但不上传纹理
只有图⽚尺⼨信息，也可以进⾏排版
17. 增强List回收能⼒
18. 增强List回收能⼒，优化前
备注：直播时这⾥为视频。
优化前，⼤Cell中的图⽚⼀
次性全部加载，统计到存活
的纹理为10，当Cell回收
后，纹理⼀次性清空。
存在内存⼤起⼤落的情况。
19. 增强List回收能⼒，优化后
备注：直播时这⾥为视频。
优化后，⼤Cell中的图⽚根
据列表滚动时是否在屏来加
载与销毁。统计到存活的纹
理以及内存的增⻓、下降⽐
较平缓。
20. 后续改进
•
•
功能改进
• 图⽚在屏、离屏判断优化；
• ⽀持图⽚库返回图⽚原始⽂件，精简链路；
• ⽀持业务定制化缓存策略；
包⼤⼩优化
•
•
允许定制化裁剪掉Flutter中的若⼲图⽚解码库，同时保证Flutter所有功能正常；
与官⽅探讨融合到主⼲
21. 如何选择适合⾃⼰App的图⽚⽅案
原⽣⽅案
是不是纯Flutter应⽤
⽹络图⽚的场景多不多
图⽚是否有必要缓存
是否追求极致包⼤⼩
有没有视频、图⽚混合
⼤多包内资源Asset图⽚，少量⽹络图⽚ 原⽣⽅案+ImageCache配置
有⽹络图⽚，但没必要缓存 原⽣⽅案+外接⽂件缓存
重度图⽚场景，需要考虑⽤户流量 AliFlutter⽅案
AliFlutter⽅案裁剪解码
外接纹理
22. 【淘系技术】微信公众号
扫码获取本期ppt内容及回放
加⼊我们