鸿蒙开发：Web性能问题分析实战案例

如下图所示，下方字块在点击后，经过一定的时间，才开始动画，实际经过延迟很大。
图一 场景动画

问题定位流程

使用录屏辅助定位

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

1. 是否有转场动效，初始动效是否明显。
2. 页面组件是否复杂。

在此问题中，可以明显发现点击时延是在动效之前的，同时组件复杂程度较低。

使用Trace工具抓取Trace

响应时延类问题首先确认响应起止点，确定这一段区域在哪里，大概是在干什么。

1. 确认起点：如果为点击触发，则首先先找到应用侧的dispatchTouchEvent Type = 1，如图二红线所示：
   图二 Trace起点 

   

2. 确认终点：一般以render_service侧的第一帧为终点，如图三蓝线所示：
   图三 Trace终点 

   

    可以发现，后续动画已经达到最大帧率，说明无响应是红线到蓝线阶段。
3. 分析中途出现的H:ReceiveVsync信号可以发现，在无响应阶段出现出现过几帧，但是每帧的耗时并没有过大。应用侧也如此，说明在UI绘制过程并没有高负载。
   图四 Trace帧率分析 

   

4. 同时可以发现在此过程中，应用长时间占用CPU，因此可能是产生了大量的计算。
   图五 可能耗时原因 

   

经过前面的分析，应用侧发现可能是H5侧产生了大量的计算，此时需要使用Devtools工具进一步分析。

使用Devtools进行分析

使用Devtools调试可以参考此链接：使用Devtools工具调试前端页面。

抓取的DevTo