在移动终端应用开发中,完成时延是指用户操作移动终端时,从输入触控指令到界面完全刷新结束并达到可以阅读的稳定状态所用时间,点击完成时延依据页面转场类型可以分为页面内跳转和页面间跳转两种。完成时延在用户体验设计中扮演着关键的角色,直接影响用户对产品的满意度和使用体验。完成时延反映了用户对响应速度的整体感受,主要影响用户对触控交互及时性和愉悦性的体验评价。如图一所示,点击完成时延包含点击响应时延
在一定时延水平以上,完成时延越短越好,当完成时延小于一定水平后,用户的流畅体验不再继续提升,建议应用或元服务内点击操作完成时延≤900ms,本文将介绍相关分析工具,点击完成时延问题定位流程以及常见问题根因分析。
图1 点击完成起止点示意图
图2 页面转场过程解析
工具介绍
性能问题检测工具 AppAnalyzer
AppAnalyzer是DevEco Studio中提供的检测评分工具,用于测试并评价HarmonyOS应用或元服务的质量,能快速提供评估结果和改进建议,当前支持的测试类型包括兼容性、性能、UX测试和最佳实践等,其中点击完成时延是性能类型中的一项检测规则,开发者可以使用该工具检测响应性能。
性能问题分析工具 DevEco Profiler
性能调优深入分析工具,支持冷启动、卡顿丢帧、状态变量、并行化、网络耗时、ArkWeb、内存优化等场景化调优能力。其中Frame分析可以帮助开发者深度分析性能问题,通过录制应用运行过程中的关键数据,从而识别卡顿丢帧、耗时长等问题的原因所在。
性能问题分析工具 ArkUI Inspector
ArkUI Inspector是DevEco Studio中提供用于检查UI的工具,开发者可以借助它预览真机或模拟器中的UI效果,快速定位布局层级问题,也可以观察组件属性、不同组件之间的关系等。
问题定位流程
下图展示了定位点击完成时延高耗时的简易流程
图3 问题定位流程图
如上图所示,分析点击完成时延问题一般需要以下几个步骤:
- 性能体检:使用性能检测工具AppAnalyzer检测应用是否存在性能问题。
- 确定完成时延耗时:使用录屏工具来确定点击完成时延的起点与终点,然后计算出整个完成时延的耗时时间,判断是否符合[《时延体检建议》]中的规范。
- 抓取Trace信息:使用性能分析工具DevEco Profiler抓取Trace,并确定Trace图中的起止点。
- 分析问题:结合关键泳道Trace信息以及ArkUI Inspector布局分析工具来定位具体问题。
关键泳道简介
上述五个关键泳道可通过函数调用耗时、转场页面绘制耗时、转场动画时延三个角度进行分析,现依据这三个角度,对关键泳道展开介绍
-
函数调用耗时分析:
ArkTS Callstack:提供了ArkTS侧的方法调用栈信息,对于分析ArkTS代码的执行实践和性能瓶颈非常关键;
Callstack:提供了Native侧的方法调用栈信息,对于分析Native层面的性能问题非常关键;
-
转场页面绘制耗时分析:
Frame:提供了应用主线程的帧渲染信息,它可以帮助识别点击完成过程中哪些帧没有按时渲染,以及可能的原因;
ArkUI Component:提供了ArkUI组件的创建、布局、渲染等过程的详细信息。可以帮助识别出哪些组件的创建或渲染过程耗时较长;
-
转场动画时延分析:
H:Animator:提供了动画执行过程中的详细信息,可以帮助识别点击完成过程中转场动画是否耗时较长
关键Trace说明如下
序号 泳道 Trace点 描述 1 应用线程 ReceiveVsync 接受Vsync信号 2 应用线程 OnvsyncEvent 收到Vsync信号,渲染流程开始 3 应用线程 FlushVsync 刷新视图同步事件,包括记录帧信息、刷新任务、绘制上下文、处理用户输入 4 应用线程 FlushDirtyNodeUpdate