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.eﬃrst.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技术专家