UC Flutter技术实践分享
如果无法正常显示,请先停止浏览器的去广告插件。
1. UC Flutter技术实践分享
讲师:刘森森(花名:森尼)
2. 个⼈简介:
刘森森(花名:森尼)
14年加⼊UC,在阿⾥度过了五年陈。⻓期
在UC信息流团队负责信息流业务的技术⼯
作。近⼀年投⼊到创新产品的研发中,负责
flutter技术在创新产品的应⽤与实践
3. ⽬录
• Flutter在UC落地的情况
• ⼯程构建体系
• 性能优化
• 动态性探索
4. Flutter业务落地情况
成熟业务
UC
创新业务
⼩萌圈
夸克
古桃
⾼效率
⾼性能
hot reload
丰富的UI组
件
⾼性能
多端⼀致性
开放性
5. 夸克&UC
夸克捷径
夸克书城
UC正经部
6. 创新产品
⼩萌圈
古桃
7. 总览
UC Flutter的阶段:规模化落地,加速创新
⼯程构建体系
•
如何提⾼flutter落地
的效率?
性能优化
•
业务痛点在哪⾥?
动态性探索
•
如何结合业务来
做?
8. ⼯程构建体系
核⼼⽬标:⾼效率
• 可快速集成到现有app
• 可快速构建全新的flutter应⽤
• 研发可快速上⼿
9. ⼯程架构
pub dev
somedir/
Flutter (Library)
my_flutter/
上游
.android/
uc pub
android_shell/
集成到现有App
公共组件管理
android
.ios/
flutter业务
ios_shell/
业务A
现有App
ios
package依赖
业务B
业务C
portal
Flutter App
flutter boot
产物集成和源码集成可配置
提供native和flutter开发两种视⻆
https://github.com/alibaba-flutter/flutter-boot
10. 业务架构
是flutter boost的重度⽤户,同时也积极反哺社区,例如⽀持hero动画等
11. 分层架构
业务层
⼩萌圈
UC正经部
夸克书城
⼀致的API层
flutter基础组件
视频组件 图⽚组件
⽤户组件 UT组件
研发⽀撑
itrace
⾼可⽤
超⾳速
Flutter Box
pub
flutter boost
flutter容器
dart runtime
端基础设施
UT
flutter engine
播放器
个⼈中⼼
flutter boot
12. 性能优化
核⼼⽬标:解决业务痛点
• 业务⾼可⽤建设
• 引擎启动速度优化
• 视频外接纹理⽅案优化
• 图⽚组件优化
13. 业务⾼可⽤
指标项
• ⻚⾯打开性能:⾸帧绘制,内容⾸帧,⾸屏可交互
• ⻚⾯流畅度:平均帧率,卡顿帧率
• ⻚⾯稳定性:⽩屏检测,异常收集,⽹络请求异常
在闲⻥⾼可⽤的基础上升级,⽀持原⽣Navigator
实时监控平台-itrace
对外:https://yueying.effirst.com
对内:https://yuque.antfin-inc.com/wpk/help/ppxlrg
•
•
•
•
•
分钟级别的实时性
提供多维度的分析⽅式
⽀持聚合,快速定位top问题
可配置预警规则
⾼可⽤展示使⽤样例,⾮线上真实数据
14. ⾼可⽤-⻚⾯性能
⻚⾯打开
路由跳转
打开页面
渲染页面
请求数据
渲染结果
检测组件
覆盖率
内容首帧
可交互时间
3s,触发白屏检测
⻚⾯帧率
使⽤handleBeginFrame和handleDrawFrame来计算每⼀帧的耗时
15. ⾼可⽤-纬度分析
纬度分析
16. ⾼可⽤-异常收集
•
•
使⽤dart提供的runZoned进⾏异常收集
使⽤HttpOverrides做⽹络接⼝的异常采集
•
•
⽀持聚合,快速定位top问题
可配置预警规则
17. 引擎启动优化
耗时分布
主线程 30% GLContext
⼦线程
等待⼦线程执⾏完毕
40% RootIsolate
others
Font Init
引擎初始化
优化⽅案
预创建GLContext
预热RootIsolate
渲染
异步化
Font Init优化
内存占⽤:预热只消耗1.4M,相⽐预热整个引擎需要16M有很⼤的优势,适合
混合式开发,特别是⼤型成熟app例如UC和⼿淘
效果
耗时优化:
预热363m->137ms 提升62%(iPhone release版本测试数据)
异步⽅案在部分机型上有100ms左右的优化
Font init优化Android部分机型优化50ms-90ms
18. 外接纹理的原理
1,获取 id
3,使⽤textureWidget绘制
Flutter
textureWidget
id
external texture
skia
绑定
2,创建Texture组件并注册
CVPixelBuffer
update
iOS
Android
SurfaceTexture
Flutter Texture
19. 视频外接纹理⽅案优化
问题:解码出来的视频格式是YUV,但Flutter需要BGRA格式,需要转换。如何做到不影响性能呢?
解法:iOS端不改引擎,通过⾼速纹理在GPU上把YUV转换成BGRA
Native
Media player
render to
YUV
GPU
texture
BGRA
bind
CVPixelBuffer
texture
TextureLayer
Flutter
render to
bind
texture
20. 视频外接纹理⽅案优化
Flutter在外接纹理时使⽤了默认的NEAREST算法,导致锯⻮明显
已给官⽅提PR:https://github.com/flutter/flutter/issues/53080
优化前
GL_NEAREST
优化后
GL_LINEAR
21. 图⽚组件优化-外接纹理
问题
• 和native内存⽆法共享
• 原⽣⽅式多图快滑的场景内存回收不及时,低端机会崩溃
收益
• Native组件库成熟的优化⼿段,例如LRU回收,多级缓存,线程池等
• 更多的图⽚格式⽀持,如:iOS的HECI格式
效果
• 内存占⽤较Flutter原⽣实现减少30%左右
• 内存回收表现也更加及时
22. 动态性探索
业务诉求:轻量级的动态卡⽚解决⽅案
解决⽅案:Flutter box,使⽤Dart作为DSL描述
1.Dart对UI的描述是结构化的
2.可⼀体式开发,从模板编写,预览到解析执⾏
3.可⽀持Dart语法的表达式
UI描述
表达式
23. 动态性探索-效果
夸克书城
• 性能数据:转换耗时100ms,滑动帧
率50fps
• 业务数据表现:书城点击率提升2%
24. 总结
现阶段的UC Flutter:规模化落地
⼯程构建体系
•
•
•
标准的⼯程架构
可复⽤的运⾏时容
器
抽象业务核⼼模
块,使研发具备统
⼀的认知
性能优化
•
•
•
构建性能监控体系
解决视频,图⽚性能
问题
对引擎修改少
动态性探索
从业务需要出发,满
⾜运营能⼒
25. 【淘系技术】微信公众号
加⼊我们
mailto:lss89780@alibaba-inc.com
扫码获取本期ppt内容及回放
前端开发专家
iOS开发专家
Android技术专家