# 案例：使用Frame模板分析应用卡顿问题

本案例介绍如何判断应用存在卡顿帧，再通过调用栈和trace信息分析应用运行逻辑，找出应用卡顿的原因。

应用卡顿分析基础功能请参考[Frame分析](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-insight-session-frame)。

## 分析步骤

分析应用卡顿类问题步骤如下：

1. 确认是否存在卡顿帧。
2. 若存在卡顿帧，根据调用栈和trace等信息进一步确定问题点。

## 分析Frame数据

### 分析应用是否存在卡顿

1. 框选Frame泳道，窗口下方的**Statistics**区域中会以进程维度对选定时间段内的Frame信息进行统计，当Jank Count大于0时，说明存在卡顿帧。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ab/v3/tJX11R87Tme_JclJv7AWfA/zh-cn_image_0000002731382953.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=A65C187AB7331F61667B4D43DD6577A2A5D94FE165C357A35CA3EE4E1E167ECA "点击放大")

2. 找到**Statistics** 区域中存在卡顿帧的进程，点击进程名称后方跳转按钮，跳转到**Frame List**区域。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/93/v3/Ee6drBX4R8-Tm4wFns3DaA/zh-cn_image_0000002731542927.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=ACCEDAE20F34E53D45CDE914D6E150F528B0B43C4A3AD4CA4542D1A3FB7A9362 "点击放大")

3. Frame List区域会展现该进程对应的Frame列表。在Frame List区域中对卡顿丢帧类型（Jank Type）进行升序排序，单击Frame List页签中任意一卡顿帧，直接跳转到该帧且泳道上该帧被反选。

   > 说明
   > * 在带**RS Frame** 和**App Frame**标签的子泳道中，正常完成渲染的帧显示为绿色，出现卡顿的帧显示为红色。
   > * AppDeadlineMissed：App侧的卡顿。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0d/v3/i6D-RVDxQFa3nPSXIMuDSQ/zh-cn_image_0000002731382951.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=B8FC35BCCC28F0A7C6B4BA4F3BC8B215F7850CFD7E6AA0C52019CA1F7EBFEF52 "点击放大")

4. 点选该卡顿帧，窗口下方的**Details**区域中显示卡顿帧的关键信息。右侧应用进程前方跳转按钮可以跳转到应用进程Trace。

   * Expected Duration：一帧绘制的期望耗时。与fps的大小有关，如fps为120，对应的Vsync周期为8.3ms，即App侧/Render Service侧的帧耗时，一般需要在8.3ms以内。
   * Actual Duration：一帧绘制的实际耗时。

   如下图，可以看到该帧的期望耗时为8ms 330μs，实际耗时为44ms54μs，远远超过了期望耗时，因此被识别为卡顿帧。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e2/v3/yTHOk6hgQ-Ktce-BPdSDLA/zh-cn_image_0000002731382957.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=3D0979E98072CBF0F5207588F3A8C859E5FF5595CC365E897A4A29932A7C16BC "点击放大")

5. 框选该异常帧时间范围，结合**ArkTS Callstack** 泳道、**Callstack** 泳道和**Trace**等信息进一步分析异常点。

### 案例：分析应用卡顿原因

1. 找到并框选要分析的异常帧，查看**ArkTS Callstack**泳道分析ArkTS侧耗时函数。优先查看主线程调用栈，即线程号与进程号一致的ArkVM子泳道。可以看到ArkTS侧一些方法的耗时。
2. 查看下图调用栈，除(program)外，其他调用栈耗时小于一帧绘制的期望耗时8.3ms（被调优的设备fps为120），因此该卡顿帧主要分析调用栈(program)的耗时。

   (program)代表程序执行进入纯Native代码阶段，该阶段无ArkTS代码执行，也无ArkTS调用Native或者Native调用ArkTS情况，一般很难通过这里分析出有效的信息，需要切换到Callstack泳道看具体的调用栈信息。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c7/v3/Mr3FsFCnTDGhJXVntw5M8w/zh-cn_image_0000002731542931.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=468D210A36841BB71D82BC89FD4A53C3F4E1BC71C707022780E732878992A99A "点击放大")

3. 切换到**Callstack**泳道，查看Callstack泳道的主线程（线程号与进程号一致）子泳道，滑动观察下方Heaviest Stack区域"%"列中占比最大的函数调用栈，Category中亮色代表开发者调用栈，灰色代表系统调用栈，可以看出下图中耗时主要在系统侧的so，无法识别具体异常原因，接下来进一步分析应用进程Trace。

   > 说明
   >
   > 也可通过底部的"Call Trees"选择框来隐藏系统调用栈，减少干扰信息。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/89/v3/YVWH2vy7SXGCzlaCfy00vg/zh-cn_image_0000002731542929.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=8D85F0F74FE778C3D6DCB4DF7825A1E46AE28400BF2D3178ED138D97C2A1C280 "点击放大")

4. 切换到应用进程Process泳道，查看主线程（线程号与进程号一致）。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/07/v3/6V5pM1bDSBif2Z0ACbcgig/zh-cn_image_0000002731542925.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=1E221CB0E72ED3DC518343DFABF67A399FC034F564B4DCAFBA44A43E9BCA6C5F "点击放大")

5. 窗口下方详情区可查看到Trace统计信息列表，逐层展开耗时最长的Trace，定位到主要耗时是在3次H:CreateImagePixelMap。接下来进一步分析这3次H:CreateImagePixelMap耗时的原因。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d3/v3/2oGOE25IS2O03vRfYlyXCg/zh-cn_image_0000002731382955.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=41EF778B480C43425C46427E4E0B2FD4DEF596399ED623F538FEBEC22FE9D1DC "点击放大")

6. H:CreateImagePixelMap和图片加载相关，再结合业务代码查看，可以看到是因为同步加载网络图片，建议修改为异步加载。

   ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9f/v3/1NWUeU2dQg-dZiBaCxh3ZA/zh-cn_image_0000002731382959.png?HW-CC-KV=V1&HW-CC-Date=20261030T033533Z&HW-CC-Expire=31536000000&HW-CC-Sign=C23CF55032C9AD87008A020217D1B4D8DAC160A7752FF757529EFBEE87562F28 "点击放大")
   > 说明
   >
   > 一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。不建议图片加载较长时间时使用同步加载。