鸿蒙(HarmonyOS)应用开发性能优化实战——应用性能分析工具CPU Profiler
往期推文全新看点[*] 鸿蒙（HarmonyOS）北向开发知识点记录~
[*] 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
[*] 鸿蒙应用开发与鸿蒙体系开发哪个更有前景？
[*] 嵌入式开发适不得当做鸿蒙南向开发？看完这篇你就了解了~
[*] 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
[*] 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
[*] 记录一场鸿蒙开发岗位面试履历~
[*] 持续更新中……
简介
本文档先容应用性能分析工具CPU Profiler的使用方法，该工具为开发者提供性能采样分析手段，可在不插桩情况下获取调用栈上各层函数的实行时间，并展示在时间轴上。
开发者可通过该工具查看TS/JS代码及NAPI代码实行过程中的时序及耗时情况，进而发现热点函数及性能瓶颈，举行应用层性能优化。
性能数据分析视图分析
性能数据可以通过DevEco Studio > Profiler > Time > ArkTS Callstack和Chrome浏览器 > JavaScript Profiler举行展示和分析。前者提供Callstack泳道图、Details图；后者提供时序火焰图（Chart）、比重图（Heavy）、树形图（Tree）。
DevEco Studio Profiler视图
分析：
该工具自DevEco Studio 4.0 beta2之后开始提供。请各位开发者将DevEco Studio更新至最新版本，以使用该工具。
ArkTS Callstack泳道图
泳道图展示了时间轴上每个时刻正在实行的函数大概正处于的阶段，对于函数来讲可理解为每个时刻调用栈的栈顶。可以通过 Ctrl+鼠标滚轮 任意放大和缩小鼠标所在位置的某一段。
NAPI方法在泳道图上被特别标记为黄色，此类方法会调用到Native代码，在Details图中可查看到该类方法的Native调用栈。
图1 ArkTS Callstack泳道图
https://img-blog.csdnimg.cn/img_convert/9c00a9e014cb823a9bc56782621a0207.webp?x-oss-process=image/format,png
Details图
在泳道图上点击任意时间条，大概选定一个起始和终止范围，工具将在下方Details图中显示此时间条代表的函数大概此范围内所有函数的完整调用链，右侧Heaviest Stack视图展示该范围内耗时最长的调用链。
图2 阶段耗时详情示意图
https://img-blog.csdnimg.cn/img_convert/2860e49450e9bfd7f45b63ba6c807713.webp?x-oss-process=image/format,png
从上图中我们不仅可以看到JS调用栈，还可以看到NAPI接口Native实现部门的C++调用栈。
对于JS方法及开发者自界说的Native方法，双击Details中该方法所在行可跳转到代码行。
分析：
当前行号尚未完全对齐函数头行号，现实为函数内部可实行代码的第一行。
Chrome浏览器JavaScript Profiler工具视图
Chrome浏览器JavaScript Profiler工具默认调用V8引擎提供的Profiler工具，可抓取网页JS性能数据。本文提供的TS/JS CPU Profiler工具的性能数据（.cpuprofile）格式与其兼容，可直接导入到该工具举行分析。
在 Chrome 浏览器上打开JavaScript Profiler工具并加载数据文件的操作步骤为：F12 > More tools > JavaScript Profiler > Load。
操作步骤示意图如下所示：
图3 JavaScript Profiler工具入口
https://img-blog.csdnimg.cn/img_convert/8218d7e014e101e0dd042bc89fb9931d.webp?x-oss-process=image/format,png
图4 加载cpuprofile文件
https://img-blog.csdnimg.cn/img_convert/7fb0ab1ee5714e3241227e46649c4756.webp?x-oss-process=image/format,png
如果找不到此工具，可勾选下图选项后F12重新打开。
图5 启用JavaScript Profiler功能
https://img-blog.csdnimg.cn/img_convert/6cc371751d17d6ad947eeefd61ed0105.webp?x-oss-process=image/format,png
该工具可将性能分析数据展示在三种视图：时序火焰图（Chart）、比重图（Heavy）、树形图（Tree）。
时序火焰图（Chart）
图6 时序火焰图（Chart）总览
https://img-blog.csdnimg.cn/img_convert/aaa78a3bb0ed1fc884935186984022a9.webp?x-oss-process=image/format,png
该视图从时间维度展示应用运行过程中每个时刻的函数调用栈，最为直观，时间轴0时刻代表开始采集，可通过鼠标滚轮放大局部。
图7 时序火焰图（Chart）详情
https://img-blog.csdnimg.cn/img_convert/84d876df0770bf75b6a09066edb8ca52.webp?x-oss-process=image/format,png
可将鼠标放在某一函数上，展示该函数详细信息，详情中包罗以下几个字段：
[*] Name：格式为“函数名（标签）”。函数名表示TS/JS代码函数名，标签信息代表函数范例，具体可见 函数名标签tag的干系分析。
[*] Self Time：以毫秒（ms）为单位。表示该函数本次调用过程中，撤消调用下一级函数所消耗时间后的自身实行耗时。计算方法为该函数本次调用的总耗时减去该函数本次调用下一级所有函数的总时间。
[*] Total Time：以毫秒（ms）为单位。表示该函数本次调用过程中的总耗时，包罗调用下一级函数所消耗的时间。
[*] URL：格式为“文件路径：行号”。表示该函数在TS/JS代码中的具体位置，包罗所在文件及在该文件中的具体行号，该行号为函数头所在行号。
分析：
[*] 当前还存在部门函数URL并未举行sourcemap转换的情况，这部门函数的URL在build目录下。
[*] 当前行号尚未完全对齐函数头行号，现实为函数内部可实行代码的第一行。
[*] Aggregated self time：以毫秒（ms）为单位。表示该函数在整个采样过程中历次调用的Self Time的总和（仅限上级调用栈一致的多次调用求和）。
[*] Aggregated total time：以毫秒（ms）为单位。表示该函数在整个采样过程中历次调用的Total Time的总和（仅限上级调用栈一致的多次调用求和）。
比重图（Heavy）
比重图列出了所有调用栈的栈顶，可以理解为时序火焰图从下往上看，看到的起首是调用链末端函数，以及各自的Self Time时间，将比重图的所有Self Time的比例相加效果为100%。
具体到某一个函数，点击箭头睁开，可以看到调用该函数的完整调用链，大概包罗多条调用链，指代这些调用链最终都会调用到该函数。
该图表可按照Self Time的大小排序，排在最前面的代表对应函数的Self Time耗时最长，可以作为重点举行分析。
如下两图分别为Chrome浏览器比重图（Heavy）和VSCode比重图（Heavy）对同一.cpuprofile文件的解析效果。不难发现，两种解析方式的时间有所差异，该差异是由计算方式的不同导致的。
Chrome浏览器比重图（Heavy）的时间并不是现及时间，而是通过函数的命中率乘以总时间得到；而VSCode比重图（Heavy）的时间是现实耗时。
做精确分析时建议使用VSCode举行解析，直接用VSCode打开.cpuprofile文件即可。
图8 Chrome比重图（Heavy）示例
https://img-blog.csdnimg.cn/img_convert/f04f95f74bbff1b9e8f3eed41def2e8a.webp?x-oss-process=image/format,png
图9 VSCode比重图（Heavy）示例
https://img-blog.csdnimg.cn/img_convert/d6e7350b48a479a54ec3407be78fea8c.webp?x-oss-process=image/format,png
树形图（Tree）
树形图列出了所有调用栈的栈底，可以理解为时序火焰图从上往下看，看到的起首是调用链的起始函数，以及各自的Total Time时间，将树形图的所有Total Time的比例相加效果为100%。
具体到某一个函数，箭头睁开，可以看到该函数调用的完整调用链，大概包罗多条调用链，指代这些调用链都是从该函数调用下去的。
该图表可按照Total Time的大小排序，排在最前面的代表对应函数的Total Time耗时最长，可以作为重点举行分析。
图10 树形图（Tree）示例
https://img-blog.csdnimg.cn/img_convert/29dc6babb062775fb7e629c9775e32aa.webp?x-oss-process=image/format,png
函数名标签(TAG)的干系分析
各类视图中函数名大概包罗(TAG)格式标签，比方func1(AOT)，大概函数名仅为(TAG)格式，比方(program)。
函数名包罗(TAG)标签
当前支持8类函数名标签，分别是(NAPI)、(ARKUI_ENGINE)、(BUILTIN)、(GC)、(AINT)、(CINT)、(AOT)、(RUNTIME)。可为应用开发者及体系开发者对各部门举行性能分析提供参考。后四种标签通过非命令方式采集时默认不可见，可通过命令 hdc shell param set persist.ark.properties 0x505c; hdc shell reboot 打开。
[*] (NAPI) ：体系NativeAPI大概开发者在DevEco Studio上自界说的NativeAPI，比方模板Native C++应用中的 testNapi.add()。
[*] (ARKUI_ENGINE)：Native实现的ArkUI组件，比方：onClick()，此类函数暂无法提供函数名。
[*] (BUILTIN)：由假造机提供的、Native实现的JS标准库接口，比方：JSON.stringify()。
[*] (GC)：垃圾回收阶段。
[*] (AINT)：TS/JS方法，该方法通过假造机的汇编解释器解释实行。
[*] (CINT)：TS/JS方法，该方法通过假造机的C解释器解释实行。
[*] (AOT)：TS/JS方法，该方法通过假造机的AOT（Ahead Of Time）编译器提前编译成了机器码，在满足编程规范的条件下可以得到充分编译加快，实行时间比解释实行快。
[*] (RUNTIME)：Native接口（NAPI, ARKUI_ENGINE, BUILTIN）调用该方法时，表示该方法调用到了假造机内部运行时代码。
函数名仅为(TAG)标签
该类标签代表的是一类特别节点，并非现实函数，包罗三种，分别是(root)、(program)、(idle)，具体含义如下。
[*] (root)：根节点，是program和idle以及所有栈底的父节点，可以理解为main函数的上一层。
[*] (program)：代表步调实行进入纯Native代码阶段，该阶段无JS代码实行，也无JS调用Native大概Native调用JS情况，大概处于体系框架层代码实行阶段。
[*] (idle)：被采集线程无任务实行或处于非running态，未占用CPU。
分析：
当前尚未统计(idle)阶段，该部门时间包罗在(program)阶段中。
(TAG)标签时间占比统计
将cpuprofile文件以json格式打开，json开头有各个TAG的总时间字段，单位为微秒（us），此中otherTime字段代表(idle)、(root)、(program)三种TAG的总时间。可以据此计算出每种TAG标签的耗时占比，为性能分析提供参考。
图11 时间占比统计示例
https://img-blog.csdnimg.cn/img_convert/5a26a7207d2869554aa123ee7e1e6284.webp?x-oss-process=image/format,png
数据采集方法及适用场景
各采集工具适用场景及支持情况
采集方法DevEco Studio Profilerdebug应用支持支持支持支持release应用暂不支持暂不支持支持支持采集主线程支持支持支持支持采集Worker线程暂不支持支持支持支持采集启动后数据支持支持支持支持采集冷启动数据暂不支持不支持支持支持 DevEco Studio Profiler工具采集
[*] 启动应用，打开DevEco Studio并确保毗连到装备（右上角显示装备SN）。
[*] 按照下图所示①-⑤的步骤打开 Profiler > Time ，选择装备及应用，创建一个新的Time Session监督器。
图12 DevEco Studio Profiler采集指引
https://img-blog.csdnimg.cn/img_convert/47ce31fbce849b15e7c39295d01a8b95.webp?x-oss-process=image/format,png
[*] 点击开始录制按钮，箭头变成方块代表开始录制。
[*] 操作应用，复现待分析场景。
[*] 再次点击录制按钮，方框变成灰色，结束录制。
[*] 选择ArkTS Callstack泳道，框选时间范围大概直接选择函数举行分析，具体可见 DevEco Studio Profiler视图。
Chrome浏览器JavaScript Profiler工具采集
[*]启动应用，可通过如下命令查看应用线程号。如果要抓Worker线程，列表中会有长线程号（长度是短线程号的两倍），每个Worker线程对应一个长线程号。
hdc shell "netstat -anp | grep PandaDebugger"
[*] 绑定线程号和端口。多个Worker线程同时采集需各自绑定不同的端标语，打开多个Chrome窗口采集。
分析：
[*] 建议选择较大端标语避免冲突，这里以9006为例。
[*] 每次断开毗连或退出历程后需重新绑定端标语。
[*] 多个Worker线程同时采集需各自绑定不同的端标语，打开多个Chrome窗口采集。
hdc fport tcp:9006 localabstract:2172PandaDebugger
图13 端口映射
https://img-blog.csdnimg.cn/img_convert/2b1dd19b3a230ee174aae44c59a2c15a.webp?x-oss-process=image/format,png
[*] 在Chrome浏览器输入网址： devtools://devtools/bundled/inspector.html?ws=//127.0.0.1:9006 ，端标语与上文一致，点击回车，进入JavaScript Profiler页面。
[*] 点击左上角录制按钮，按钮变为红色开始录制。
[*] 操作应用，复现待分析场景。
[*] 再次点击录制按钮，按钮变为灰色结束录制。
[*] 点击左上角性能分析陈诉，右侧显示性能分析图表，可以选择图表范例，显示数据表大概火焰图。
图14 JavaScript Profile视图布局
https://img-blog.csdnimg.cn/img_convert/e16367ca4eb87c849b478fae8db7c3c5.webp?x-oss-process=image/format,png
hdc shell命令采集
[*] 根据场景设置对应假造机参数。
[*]采集冷启动数据
# 仅采集主线程冷启动
hdc shell param set persist.ark.properties 0x705c
# 仅采集Worker线程冷启动
hdc shell param set persist.ark.properties 0x1505c
# 同时采集主线程及Worker线程冷启动
hdc shell param set persist.ark.properties 0x1705c
[*]采集启动后任意阶段
# 仅采集主线程任意阶段
hdc shell param set persist.ark.properties 0x2505c
# 仅采集Worker线程任意阶段
hdc shell param set persist.ark.properties 0x4505c
# 同时采集主线程及Worker线程任意阶段
hdc shell param set persist.ark.properties 0x6505c
[*]针对冷启动数据的采集，需设置待采集应用的包名。此处以 com.ohos.example 为例。
hdc shell param set persist.ark.arkbundlename com.ohos.example
[*]重启装备。
hdc shell reboot
[*] 启动应用，会在拉起应用前自动开始采集数据。
[*] 操作应用，复现待分析场景。
[*] 针对启动后任意阶段数据的采集，需使用如下命令，开始采集，此中 pid 为应用历程号。
hdc shell kill -39 pid
[*] 操作应用，复现待分析场景。
[*] 停止采集数据，此中 pid 为应用历程号。
hdc shell kill -39 pid
[*] 拉取cpuprofile文件。此处以com.ohos.example为例，文件现实位置及文件名以现实应用为准。
分析：
步骤6~8可重复实行多次，会分别采集多个阶段，生成多个.cpuprofile文件。
每次采集的次数后缀会加1，初始次数为1。冷启动数据无次数后缀。
# 主线程：
# 通常非系统应用抓取后cpuprofile通常存储在/data/app/el2/100/base/<bundle_name>/files/
hdc file recv /data/app/el2/100/base/com.ohos.example/files/com.ohos.example_次数.cpuprofile ./
# 系统应用存储在/data/app/el2/0/base/<bundle_name>/files/
hdc file recv /data/app/el2/0/base/com.ohos.example/files/com.ohos.example_次数.cpuprofile ./
# Worker线程：
# 通常非系统应用cpuprofile通常存储在/data/app/el2/100/base/<bundle_name>/files/
hdc file recv /data/app/el2/100/base/com.ohos.example/files/com.ohos.example_线程id_次数.cpuprofile ./
# 系统应用存储在/data/app/el2/0/base/<bundle_name>/files/
hdc file recv /data/app/el2/0/base/com.ohos.example/files/com.ohos.example_线程id_次数.cpuprofile ./
[*]将 com.ohos.example.cpuprofile 文件导入Chrome浏览器 > JavaScript Profiler举行分析，具体可见Chrome浏览器JavaScript Profiler工具视图。
图15 加载cpuprofile文件
https://img-blog.csdnimg.cn/img_convert/c78cf6ec306dbc3ec6254f663392c40f.webp?x-oss-process=image/format,png
应用代码插桩采集
[*] 在应用代码中按照如下方式插桩，并打包、安装应用。
分析：
插桩位置建议选择为不会重复实行的关键位置，比方onClick中的首行和末行；若重复实行start、stop，仅有第一次的start、stop会乐成实行。
import hidebug from '@ohos.hidebug';
// 参数为输出文件的文件名，无需加后缀。该参数为必要参数。
hidebug.startJsCpuProfiling("filename");
// code block
// ...
// code block
hidebug.stopJsCpuProfiling("filename");
[*] 启动并操作应用，复现待分析场景，确保插桩代码行能实行到。
[*] 拉取json文件并将后缀更改为cpuprofile。此处以com.ohos.example为例，文件现实位置及文件名以现实应用为准。
# 通常非系统应用抓取后cpuprofile通常存储在/data/app/el2/100/base/<bundle_name>/files/
hdc file recv /data/app/el2/100/base/com.ohos.example/files/filename.json ./filename.cpuprofile
# 系统应用存储在/data/app/el2/0/base/<bundle_name>/files/
hdc file recv /data/app/el2/0/base/com.ohos.example/files/filename.json ./filename.cpuprofile
[*]将 filename.cpuprofile 文件导入Chrome浏览器 > JavaScript Profiler举行分析，具体可见 Chrome浏览器javascript-profiler工具视图。
图16 加载cpuprofile文件
https://img-blog.csdnimg.cn/img_convert/7f0d79ea04184ba192a20c3206c558a8.webp?x-oss-process=image/format,png
末了
总是有很多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道必要重点掌握哪些鸿蒙开发知识点？ 为了办理各人这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给各人用来跟着学习。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包罗了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、体系定制移植……等）技术知识点。
https://img-blog.csdnimg.cn/img_convert/d3d128e5efb21ca5b57ff96115388506.webp?x-oss-process=image/format,png
《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview
怎样快速入门？
1.根本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/direct/07f74424c318427e8a0a4bef0bb01f7a.png
鸿蒙开发面试真题（含参考答案）:
https://i-blog.csdnimg.cn/direct/63f4719b608e46a0b0470c4f02dbb02e.png
《OpenHarmony源码解析》:
[*]搭建开发环境
[*]Windows 开发环境的搭建
[*]Ubuntu 开发环境搭建
[*]Linux 与 Windows 之间的文件共享
[*]……
[*]体系架构分析
[*]构建子体系
[*]启动流程
[*]子体系
[*]分布式任务调理子体系
[*]分布式通信子体系
[*]驱动子体系
[*]……
https://img-blog.csdnimg.cn/img_convert/b2a7c0f56b33ef83d8199a6e53e443f2.png
OpenHarmony 装备开发学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview
https://img-blog.csdnimg.cn/img_convert/35b4e458bb0a8a3bb1c75278c7493fd5.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]