基于Web组件的响应时延问题分析思路与案例

场景导入

响应时延是指，应用内手指点击离开屏幕或出现移动开始，到页面发生变化的时间。常见的场景包括点击后弹出弹窗或者loading动画，滑动后页面移动等场景。

性能指标

标准价值和影响：

指标分级：

当前测试标准包含 15ms 硬件处理补偿，如标准为 80ms，则trace耗时最长可为 65ms = 80 - 15。

性能衡量起始点介绍

点击操作响应时延的性能衡量的起点，为用户点击应用元素离手帧时间，终点为应用界面发生变化的时间。

滑动操作响应时延的性能衡量的起点，为用户开始滑动时间，终点为应用界面发生变化的首帧。

Trace 解读

1.Trace 抓取。

a.Chrome DevTools抓取。
Web组件支持使用DevTools工具调试前端页面，参考文档：​​​使用Devtools工具调试前端页面​​。

1. 打开调试开关。

hdc shell param set web.debug.devtools true
1.

            ii：查找devtools远程调试所需的domain socket名称，该名称与进程号有关，重启调试应用后，需要重复此步骤，以完成端口转发。

hdc shell "cat /proc/net/unix | grep devtools"
// 显示 @webview_devtools_remote_14876
1.
2.

            iii：配置端口映射, 添加映射\[pid\]替换成实际的进程id。

hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
// hdc fport tcp:9222 localabstract:webview_devtools_remote_14876
1.
2.

            iv：查看映射。

hdc fport ls
1.

            v：验证端口转发是否成功。
            在电脑端Chrome浏览器地址栏中输入chrome://inspect/\#devices，页面识别到设备后，就可以开始页面调试。
调试效果如下：

            vi：点击inspect 进入调试页面。

             vii：点击录制按钮进入录制

              viii：点击停止按钮结束录制。

可以先从全局初筛分析范围，然后按选中范围进行细筛。

常见泳道介绍：

b.DevEco Studio Trace抓取。

DevTools Trace细节丰富，但是不易导出共享。 DevEco Studio Trace 共享能力较好，参考文档：​​DevEco Profiler工具简介​​。

i:进入Profiler 窗口，选中应用进程，点击Frame图标开启会话，点击录制按钮开始录制。

           ii:点击停止按钮结束录制。

           iii:录制结果。

常用泳道介绍：

2.Trace点确认。

a.点击操作响应时延。

DevTools Trace：

以 pointerup 事件为起点，以页面明显变化帧（链接变色，图标变色等不计算）为结束点。

DevEco Trace

b.滑动操作响应时延。DevTools Trace

以touchMove事件为起点，以页面发生滑动帧为终点。

DevEco Trace

常见问题

1.应用加载资源后响应。

问题描述：点击操作响应时延超标。
Trace特点：

点击和响应之间存在明显网络请求过程和JS执行处理。

优化方案：建议应用缓存页面资源或者添加转场操作。

2.应用执行JS后响应。

问题描述：点击操作响应时延超标。
Trace特点：
点击和响应之间存在明显JS执行处理。

优化方案：
建议应用优化执行逻辑或者添加转场或动画。