高可用流畅度方案

1. Flutter 线上流畅度监控方案叶然（阿詹）阿里巴巴 - 智能信息事业群 - U4 内核研发团队

2. 目录 01 背景介绍 02 方案总览 03 指标建设 04 定位问题 05 总结与展望

3.

4. 背景介绍

5. 背景与现状监控指标不准 • 线上指标和线下测试差异大，精度不够，导致无法准确感知性能劣化，只能关注指标的波动。监控场景复杂 • 线上用户使用场景复杂，导致监控到大量异常极值数据，难以分析。版本迭代的质量难以把控日常监控难以发现问题缺乏有效定位手段 • 当指标出现波动时，无法定位或者定位能力不够高效，只能定位少数问题人力成本巨增对线上情况毫无掌控

6. 突破思路精准指标需求帧率发现问题 ?不够 Hummer 引擎卡顿高效闭环方案定位方案定位问题卡顿Trace 验证效果卡顿聚合

7. 方案总览

8. 卡顿trace定位案例流畅度分析模型帧率监控刷新率 1. 帧率分析 5.线下优化场景 2.发现波动卡顿监控卡顿耗时卡顿trace 卡顿数量卡顿trace 卡顿率 4.trace定位 3.卡顿分析聚合排名卡顿场景卡顿函数卡顿间隔

9. 线上监控方案架构平台侧 Itrace 大盘实时监控多位度问题分析数据可视化自动诊断优先级自动预警用户路径高可用插件数据上报通道客户端 Hummer 引擎卡顿判定帧率 API请求白屏首屏资源加载页面访问异常自定义监控卡顿trace收集首屏判定首屏问题信息收集业务代码图片加载跟踪黑屏检测

10. 流畅度指标建设

11. Flutter渲染流水线 Vsync Ui Dart Layer Tree Layer Tree Layer Tree Raster Compositor｜Skia Layer Tree Layer GL Tree Vulkan 系统 GPU Vsync

12. 业界方案1 Vsync Ui Vsync Dart Raster Compositor｜Skia 系统 GPU 帧耗时数据 ?延迟一秒返回

13. 业界方案2 Vsync Ui Raster 系统 Vsync Dart Frame_count Compositor｜Skia Draw_count 帧率 = 60*(draw_count / Frame_count) GPU

14. Vsync 实验室方案和hummer方案 Vsync Dart Ui Raster Compositor｜Skia 系统 GPU PRODUCER BUFFER QUEUE CONSUMER ⚡Present fence

15. 帧率方案对比业界方案1 01 官方Api(addTimingsCallback)：❌准确性、延迟 02 03 04 业界方案2 60*满帧率： ❌准确性业界线下方案 Dump SurfaceFlinger：✅准确度高❌不适用线上 Hummer方案帧绘制开始时统计次数:✅较准确、适用线上、简单

16. 帧率建设按照刷新率分类场景分类脏数据过滤按主流刷新率对帧率分类增加场景信息（滑动、动画）过滤拖拽、慢滑、手指触屏所造成的脏数据 - 01 - - 02 - - 03 - 按照动画为单位计算fps 只统计连续刷帧的场景 -04 -

17. 卡顿trace定位案例帧率的缺陷波动不明显 • 当业务的水准较高时，帧率就会波动不明显关注卡顿变化 • 帧率关注卡顿问题的增幅来发现问题卡顿

18. 卡顿trace定位案例流畅度分析模型帧率监控刷新率 1. 帧率分析 5.线下优化场景 2.发现波动卡顿监控卡顿耗时卡顿trace 卡顿trace 细致分析模型 4.trace定位卡顿数量 3.卡顿分析卡顿率聚合排名卡顿场景卡顿函数卡顿间隔

19. 卡顿方案对比业界方案1 01 官方Api（addTimingsCallback）：❌延迟 02 03 04 业界方案2 掉帧数： ❌过于严格，脱离体感电影帧卡顿：当前帧耗时>前三帧耗时平均值的两倍业界线下方案当前帧耗时>两个电影帧（1000ms/24*2 =83ms）电影帧卡顿：✅关注体感❌仅适用游戏场景 Hummer方案更小的电影帧卡顿:✅关注体感，适用app场景

20. 帧耗时计算 Vsync Ui Raster Vsync Vsync Raster_end 系统帧耗时 = Ceil((Raster_end – Vsync) / Vsync_interval)* Vsync_interval

21. 卡顿方案优势准确度高卡顿和停顿的区别贴近体感丰富的卡顿信息最接近实验室精度的监控方式解决很多方法无法判定停顿的考虑视觉暂留，更贴近用户体提供卡顿时间、卡顿率、卡顿感间隔、线程耗时等数据问题 - 01 - - 02 - - 03 - -04 -

22. 定位卡顿问题

23. 卡顿定位方案对比卡顿堆栈卡顿trace 卡顿trace 卡顿堆栈 ✅捕获准确 ❌难捕获 -> 频繁的捕获 ✅好分析 ✅极底比例采样，性价比高 ❌难分析 ❌需要大量抓取才能分析， ?不细致->✅细致 ✅细致性价比低

24. 卡顿trace流程 App • 利用官方已有的trace机制，缓存业务和引擎层的 • 一帧的trace信息性能优化（线程锁，文件 • 落盘）判定卡顿，提取缓存的一帧trace • 监控平台借助Perfetto 卡顿 • trace可视化卡顿聚合高可用 • • 数据整理和计算上报卡顿日志

25. 卡顿trace优势数据可视化自动诊断聚合动态采样用户无感高效定位

26. 卡顿trace定位案例卡顿trace实战优化前优化后卡顿占比 35.39% 0.04% 帧率（滑动） 55.7 56.8 定位率聚合后top2卡顿问题卡顿问题定位优化效果验证

27. Itrace界面实时分析指标大盘

28. 总结与展望

29. 方案特色引擎的助力引擎层的辅助信息精准且贴近体感的指标设计深挖底层原理，从用户使用角高效定位问题方案闭环卡顿trace和卡顿聚合发现问题，定位问题，验证优化度思考 - 01 - - 02 - - 03 - -04 -

30. 致力于打造业界领先的线上监控方案首屏监控白屏内存分析提高判定准确率提高判定准确率客户端场景复现引擎占位图场景轮播图场景特殊图忽略图片加载全链路分析黑屏服务端判定客户端定位信息收集引擎

31. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料 U4内核技术公众号后续也将推送 D2 会后技术文章，敬请关注！！

32. 感谢大家观看