基于ArkUI的同页面内的点击操作响应时延问题分析思路&案例

1.场景导入

同页面内点击操作时延是指，应用内手指点击从离开屏幕开始，到页面发生变化的时间。常见场景包括点击后界面元素变化，弹出弹窗或者loading动画等场景。

2.性能指标

2.1 性能指标介绍

点击操作响应时延的S标为100ms，从点击离手到页面发生变化在100ms内。保障应用应用内操作响应及时，看护用户极致流畅体验。

2.2 性能衡量起始点介绍

1.点击操作响应时延的性能衡量的起点为用户点击应用元素离手帧时间，终点为应用界面发生变化的首帧。2.可以通过Avidemux这个工具数帧判断起点和终点起点：手指抬起的那一帧终点：页面发生变化那一帧

页面变化示意图：

如上数帧选取变化的第一帧（第二张图片）作为终点。

3. 问题定位流程

3.1抓取trace

参考附录：通过IDE工具抓取trace

3.2确认起止点

响应时延计算公式 响应时延=硬件耗时+软件耗时（整个耗时，包含我们在trace上看的软件的耗时，机器本身的一个硬件耗时，一般硬件耗时大概在30ms左右，在trace上的起点到终点的时间加上30ms左右的硬件耗时和测试给出的实际耗时能对的上即可。）

起点 mmi_service 对应的up事件 ，多模收到手指抬起事件。（对应图标1代表的点）

终点 页面变化第一帧对应RS HardwareThread:CommitAndReleaseLayers 的终点。（对应图标5代表的点。）

注意 对于响应时延一般都是收到抬手事件后的第一帧。但是还是需要和视频实际数帧的时间对应，因为有可能出现，应用送了一帧，但是实际上在屏幕上人因视觉上看不到变化。所以需要往后再数几帧，算上硬件30ms左右的耗时，能和录屏数帧对上的应用帧，即可确认为页面变化帧。

数帧步骤安装并打开Avidemux 这个数帧工具，导入视频，通过左右键按照标准（章节2.2）逐帧找到起始点，圈出起止时间。

Avidemux_2.8.1VC 64bits.rar

3.3整体时间段分解

关键流程 1.多模收到事件上报 -> 2.应用收到触摸事件 -> 3. 应用收到Vsync信号，刷新UI并将数据提交到RS侧 -> 4.RS子线程RSHardwareThread 将绘制结果提交到硬件完成上屏 （应用的每一帧都在重复3.4这两个流程）流程图 根据流程，将整体耗时分成三段，多模阶段耗时，应用阶段耗时，图形阶段耗时