【鸿蒙实战开发】基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例

1.场景导入

点击操作响应时延：从点击离手开始到页面发生转场变化第一帧，这一段时间称为点击操作响应时延。点击操作响应时延可分为：页面切换点击操作响应时延：点击操作会切换页面（转场）页面内点击操作响应时延：点击操作不会切换页面（转场）

这里讨论页面切换点击操作响应时延场景描述：Web页面内部点击按钮路由跳转新页面，此时APP发生了页面跳转（H5内部）场景特点：观察看到页面发生的转场切换，实际Web组件无变化，是H5页面跳转H5页面

2.性能指标

2.1 性能指标介绍

时间起点：点击离手；时间终点：界面发生变化。推荐时间100ms

2.2 性能衡量起止点介绍

响应起点：手指点击抬手离开屏幕

响应终点：肉眼看到屏幕变化的第一帧

响应时延：两处时间差值

3.问题定位流程

3.1 通用前置流程

3.1.1 查看操作录屏辅助定位

处理三方应用问题时，可以优先查看操作录屏，查看操作场景，看能否发现一些有助于定位的信息，比如

1、是否有转场动效，初始动效是否明显

2、页面组件是否复杂

3.1.2 Trace抓取

trace抓取参考：【附录1：【Web组件的H5页面切换类点击操作】抓取trace】

DevTools抓取trace参考：【附录2：DevTools抓取Web页面trace】

3.2 问题定位思路

响应时延类问题的通用定位思路为先确认响应起止点，然后确定区域，每一段区域大概是在干什么，看响应过程中的哪一段区域耗时异常，如果发现异常区域，则根据trace进一步确认问题点，确定责任领域并对齐处理，处理流程如下：

3.2.1 确定起止点

测试响应时延：参考：【2.2 性能衡量起止点介绍】

3.2.1.1 IDE（DevEco Studio）Profiler工具确定起止点

起点确认：搜索dispatchtouchevent，找到type=1的那个dispatchtouchevent，就是点击抬手起点。

Trace点名称	含义	问题定位作用
DispatchTouchEvent , type=1	手指点击后离手	作为点击完成

终点确认：根据测试响应时延时间从起点拉取对应时间找到终点

3.2.1.2 DevTools****工具确定起止点

DevTools重新抓取trace，和测试值有偏差，由于加入了许多trace点，通常新trace的响应时延会高于测试响应时延，属于正常，新录制的trace主要作用在于分析异常耗时比例，和可能优化的异常点

**起点确认：**搜索：dispatchEvent 找到 touchendHandler函数下的dispatchEvent，或者搜索touchEnd

终点确认：肉眼看到屏幕变化的第一帧，结合视频数据确定的响应终点图像，在【Frame】泳道找到对应的终点帧

3.2.2 找问题点

3.2.2.1 区域划分

DevTools录制的泳道可分为图示的几大区域，区域划分，发现可能的异常区域来分析根因【图示 1：区域划分】 后续会用到此图，标记为图示1

起点：区域①：搜索dispatchEvent：记录【起点时间】

终点：区域②：frame泳道第一帧送显，记录【终点时间】

动画区域：区域⑥：

组件加载区域：区域③④：记录【加载耗时时间