前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >实战技巧 DevEco Profiler 性能调优 Time

实战技巧 DevEco Profiler 性能调优 Time

作者头像
万少
修改于 2025-02-10 09:33:19
修改于 2025-02-10 09:33:19
9800
代码可运行
举报
运行总次数:0
代码可运行

实战技巧 DevEco Profiler 性能调优 Time

背景

DevEco Studio 开发工具中提供了 Profiler 面板,可以让我们在针对实际开发应用过程中碰到的一些性能相关的问题提供解决方案。如响应速度慢、动画卡顿、内存泄漏、发热、耗电快等等场景。其中 Profiler 提供了实时监控、深度录制等监控过程的功能。从分析的角度入手,主要有以下几个纬度进行分析:

场景

面板

基础耗时分析

Time

基础内存分析

Allocation

内存泄露分析

Snapshot

CPU 活动分析

CPU

冷启动分析

Launch

并行并发分析

Concurrency

加载丢帧分析

ArkWeb

网络诊断

Network

PixPin_2024-11-19_23-45-42
PixPin_2024-11-19_23-45-42

不过需要注意的是 Profiler 只能配合真机来使用,模拟器暂时不支持。

Time

Time 面板常见的需求是对应用中的函数耗时进行分析。函数作为应用开发基本的基石,一般常见的耗时工作都是放在函数中进行的。

Time 可以对同步函数和异步函数进行分析。还提供了很方便的一键跳转到源码的功能,给开发者调试代码提供了很高效率的保证。

调试素材

为了方便调试,我们提供了以下素材。

image-20241119235346173
image-20241119235346173
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  fn1() {
    this.fn2()
  }

  fn2() {
    this.fn3()
  }

  fn3() {
    this.fn4()
  }

  fn4() {
    promptAction.showToast({ message: `快速任务结束` })
  }

  build() {
    Column() {
      Button("快速任务")
        .onClick(() => {
          this.fn1()
        })

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

设置函数名称

在模块的 build-profile.json5 中添加以下配置,否则采集到的函数可能都是匿名函数

entry/build-profile.json5 中 设置 strip 为 false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "apiType": "stageMode",
  "buildOption": {
    "nativeLib": {
      "debugSymbol": {
        "strip": false
      }
    }
  },

选择应用和进程

点击菜单中的 Profiler,然后选择对应的设备和应用,进程会自动选中的。

image-20241119235643530
image-20241119235643530

然后选中 Time 菜单

image-20241119235903928
image-20241119235903928

开始跟踪,定位耗时任务

  1. 一切准备就绪后,点击创建 Session
  2. 然后点击 按钮开始录制
image-20241120000051504
image-20241120000051504
  1. 在录制过程中,开始使用你的应用来重现问题。操作完毕后,记得点击结束。完成这次流程的录制。
PixPin_2024-11-20_00-08-45
PixPin_2024-11-20_00-08-45

Time 面板介绍

在点击结束录制后,便能看到这个画面

image-20241120001739740
image-20241120001739740

ArkTS Callstack

方舟运行时函数调用泳道,基于时间轴展示 CPU 使用率和虚拟机的执行状态,以及当前调用栈名称和调用类型。由于隐私安全政策,已上架应用市场的应用不支持录制此泳道。

调用栈分类从语言层面分为 ArkTS、NAPI 以及 Native,从归属层面分为开发者代码以及系统代码。从这两个方面可以将调用栈类型归类如下:

  • ArkTS:程序正在执行 ArkTS 代码;
  • NAPI:程序正在运行的 NAPI 代码;
  • Native:程序正在执行的 Native 代码; 其中每一个类型的亮色灰色分别代表开发者和系统的代码。
image-20241120001849449
image-20241120001849449
  1. ArkTs Callstack 包含有开发者自己写的代码。点击它,会在下方显示详情面板
  2. Weight 表示函数的总耗时,Self 表示函数自身的耗时。如
image-20241120002136473
image-20241120002136473
  1. Heaviest Stack 表示是Details区域选择节点所处的耗时最长的完整调用栈
  2. 绿色部分表示开发者自己编写的代码,可以看见右侧还有对应的 fn1、fn2、fn3 等等。通过这个函数调用栈便可获知哪个函数比较行耗时了
  3. 此时,如果想要快速定位到源码,双击函数即可

User Trace

Time 面板一般直接用来分析同步代码,如果想要分析和定位异步代码,建议搭配 hiTraceMeter 接口配套 User Trace 使用

hiTraceMeter 接口

接口名

描述

hiTraceMeter.startTrace(name: string, taskId: number)

异步时间片跟踪接口,标记一个预跟踪耗时任务的开始。taskId 是 trace 中用来表示关联的 ID,如果有多个 name 相同的任务并行执行,则每次调用 startTrace 的 taskId 不同;如果具有相同 name 的任务是串行执行的,则 taskId 可以相同。

hiTraceMeter.finishTrace(name: string, taskId: number)

异步时间片跟踪接口,name 和 taskId 必须与流程开始的 hiTraceMeter.startTrace 对应参数值保持一致。

调试素材

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { hiTraceMeter } from '@kit.PerformanceAnalysisKit'

@Entry
@Component
struct Index {
  sleep(n: number) {
    const promise = new Promise<void>(resolve => {
      setTimeout(() => {
        resolve()
      }, n * 1000)
    })
    return promise
  }

  async asyncCb1() {
    hiTraceMeter.startTrace("异步长时任务", 1)
    await this.sleep(1)
    hiTraceMeter.finishTrace("异步长时任务", 1)
    await this.asyncCb2()
  }

  async asyncCb2() {
    hiTraceMeter.startTrace("异步长时任务", 2)
    await this.sleep(2)

    hiTraceMeter.finishTrace("异步长时任务", 2)
    await this.asyncCb3()
  }

  async asyncCb3() {
    hiTraceMeter.startTrace("异步长时任务", 3)
    await this.sleep(3)
    hiTraceMeter.finishTrace("异步长时任务", 3)
  }

  build() {
    Column() {
      Button("异步长时任务")
        .onClick(async () => {
          await this.asyncCb1()
          AlertDialog.show({ message: JSON.stringify('结束', null, 2) })
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

PixPin_2024-11-20_00-30-56
PixPin_2024-11-20_00-30-56

分析

image-20241120003154861
image-20241120003154861
  1. 展开 User Trace
  2. 可以看见 User Trace 泳道上存在粉色的 3 个异步任务
  3. 点击以上随便一个,可以在 detail 中看见这个函数的具体耗时

总结

开发应用或服务过程中,如果遇到卡顿、加载耗时等性能问题,开发者通常会关注相关函数执行的耗时情况。DevEco Profiler 提供的 Time 场景分析任务,可在应用/服务运行时,展示热点区域内基于 CPU 和进程耗时分析的调用栈情况,并提供跳转至相关代码的能力,使开发者更便捷地进行代码优化。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
GitHub标星6200:一种字体,变成千姿百态艺术字,可尖可圆可开花,隔壁设计师馋哭了
Leon Sans最特别的地方在于,字体是由代码构成的。有了这些代码,它可以随意变身。
量子位
2019/10/25
7190
ol中闪烁点动画的实现
实现如图的动画,可以用两种思路: 1.overlay+css3动画实现; 2.canvas动画实现。
牛老师讲GIS
2019/08/29
1.7K0
ol中闪烁点动画的实现
openlayers4中闪烁点的实现
概述: 本文讲述如何在Openlayers4中实现闪烁点。 效果: 代码: 1、flash-marker.js闪烁点扩展 (function (global, factory) { typeo
牛老师讲GIS
2018/10/23
1.9K0
openlayers4中闪烁点的实现
canvas绘制折线路径动画
要实现以上路径动画,一般可以使用svg的动画功能。或者使用canvas绘制,结合路径数学计算来实现。
用户3158888
2022/03/22
1.6K0
canvas绘制折线路径动画
使用canvas绘制圆弧动画
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/86365888
j_bleach
2019/07/02
1.4K0
使用canvas绘制圆弧动画
上海加油,程序员是这么看视频的
刷了一晚上PYQ,花了一点时间临时写了这个代码,以下是完整代码。 <!DOCTYPE html> <html> <head> <!-- 程序员:大帅老猿 --> <meta charset="utf-8"> <title>BadApple</title> <style type="text/css"> html,body{ margin: 0; padding: 0; } </style> <script type="text/javascript"> functio
大帅老猿
2022/06/06
2370
上海加油,程序员是这么看视频的
前端canvas基础复习,canvas学习笔记,持续记录
最开始学html5的时候,曾特意了解过canvas,还记得当时为了搞明白canvas的api,绞尽脑汁了很多个日日夜夜。
房东的狗丶
2023/02/17
2.5K0
前端canvas基础复习,canvas学习笔记,持续记录
❤️创意网页:创建更炫酷的动态网页——彩色数字(1到9)粒子动画
在这篇技术博客中,我们将学习如何创建一个令人惊叹的动态网页效果。我们将使用HTML5的Canvas元素和JavaScript来实现一个彩色数字粒子动画。这个动画将在浏览器中展示一组随机位置和颜色的彩色数字粒子,它们将以不同的速度从画布顶部飘落至底部,并循环重新开始,形成一个华丽的视觉效果。
命运之光
2024/03/20
3710
❤️创意网页:创建更炫酷的动态网页——彩色数字(1到9)粒子动画
前端动画实现总结
SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制: - 用于控制动画延时 - 对属性的连续改变进行控制 - 颜色变化,但用就能控制 - 控制如缩放、旋转等几何变化 - 控制SVG内元素的移动路径
江米小枣
2020/06/16
1.4K0
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环: image.png Canvas渐变 在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法,这里是圆环,所以主要讲strokeStyle方法,fillStyle方法也同样适用。 看一下上面那个圆,像把一个线性的渐变给『掰弯』成一个圆。Canvas中有线性渐变的支持,我们可以试一
Bob.Chen
2018/05/02
6.5K0
Canvas画图-一个比想象中更骚气的圆(渐变圆环)
Canvas绘制一个类似老版支付宝信用分仪表盘效果
ESM模块的发布,用了rollup来打包,很不错的一个工具,有时间我写个typescript-rollup-startkit
CRPER
2019/04/01
8780
❤️创意网页:绚丽粒子雨动画
欢迎来到本篇技术博客!今天,我们将一起学习如何使用 HTML、CSS 和 JavaScript 来创造一个更炫酷的动态网页示例。我们将在网页中添加许多随机颜色的粒子,让它们以不同的速度在画布上飘动,形成一个美妙的粒子效果。让我们开始吧!
命运之光
2024/03/20
1930
❤️创意网页:绚丽粒子雨动画
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
在这个技术博客中,我们将学习如何使用HTML5 Canvas和JavaScript创建一个炫酷的网页效果。我们将打造一个动态的旋转彩虹背景,并在其中添加一个可爱的旋转星星动画。通过本博客,您将了解如何使用Canvas绘制彩虹渐变背景和绘制旋转的星星,以及如何通过动画实现星星的旋转效果。
命运之光
2024/03/20
2220
❤️创意网页:打造炫酷网页 - 旋转彩虹背景中的星星动画
H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点。Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
小周sir
2019/09/23
1.1K0
H5的canvas绘图技术
微信小程序分享图片的简易canvas工具类
如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类
韦弦zhy
2018/12/05
1.5K0
微信小程序分享图片的简易canvas工具类
创建canvas设置canvas尺寸绘制图形Canvas库
Canvas是常见的前端技术,但是由于API众多,使用复杂,且对程序员的数学功底、空间想象能力乃至审美都有一定要求,所以真正擅长canvas的前端并不多,但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。
MudOnTire
2020/05/12
4.6K0
创建canvas设置canvas尺寸绘制图形Canvas库
❤️创意网页:萌翻少女心的果冻泡泡 - 创造生动有趣的视觉效果
大家好!欢迎来到本篇技术博客。今天我们将一起学习如何使用HTML5 Canvas和JavaScript创建一个可爱又有趣的果冻泡泡效果。我们将绘制一组彩色泡泡,并通过动画让它们像果冻一样晃动,给人一种充满活力的感觉。让我们开始吧!
命运之光
2024/03/20
2010
❤️创意网页:萌翻少女心的果冻泡泡 - 创造生动有趣的视觉效果
Canvas画图基础
画矩形 Canvas画矩形还是比较方便的,可以用fillrect,clearrect,strokerect,rect几种方法,各自间有点区别,先上代码: // html <canvas id="canvas" width="500" height="500" ></canvas> var canvas1 = document.getElementById("canvas"); var ctx = canvas1.getContext('2d'); ctx.strokeStyle = '#ff4444';
Bob.Chen
2018/05/02
2K0
Canvas画图基础
【前端动画】实现动画的6种方式
javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。(❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步~)
前端修罗场
2023/10/07
5200
使用canvas实现一个圆球的触壁反弹
HTML <canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas> JS 1.获取上下文 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); 2.实现一个球类 1 class circle { 2 constructor() { 3
李文杨
2018/03/14
8120
推荐阅读
相关推荐
GitHub标星6200:一种字体,变成千姿百态艺术字,可尖可圆可开花,隔壁设计师馋哭了
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验