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技术专家

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-11 14:19
浙ICP备14020137号-1 $访客地图$