目录

UI调优

本章节主要介绍UI的dump和调优能力，用于提高开发效率和优化开发者体验。

状态管理hidumper、调试与调优

为提升开发者定位状态管理问题的效率，UI提供针对状态变量的hidumper、调试与调优功能，将状态变量的黑盒信息暴露给开发者，帮助开发者深入了解状态变量和UI组件的变化过程，提升开发高性能应用的效率。

[h2]状态管理hidumper能力

状态管理接入hidumper，支持通过-jsdump获取状态变量关联的组件、自定义组件树等信息，方便开发者了解状态变量影响的UI范围，写出高性能应用代码。

下面介绍-jsdump每个参数的含义：

除上述命令外，开发者可以额外输入以下命令选择递归打印或指定打印某一个组件id的信息，如果没有指定，则默认打印页面的根节点的信息。

具体例子如下：

下面的例子为嵌套两层子组件的典型示例，使用了装饰器@State和 @Link。开发者可组合使用上述命令，展示前端组件树、状态变量和其影响的组件等信息。

@Entry
@Component
struct Page {
  @State message: string = 'hello world';

  build() {
    Column() {
      Text('Parent:' + this.message).fontSize(20).onClick(() => {
        this.message += '1';
      })
      Child({ message: this.message })
    }
  }
}

@Component
struct Child {
  @Link message: string;

  build() {
    Column() {
      Text('Child:' + this.message).fontSize(20)
      GrandChild({ message: this.message })
    }
  }
}

@Component
struct GrandChild {
  @Link message: string;

  build() {
    Column() {
      Text('GrandChild: ' + this.message).fontSize(20)
    }
  }
}

步骤1：获取当前激活窗口的id。

hdc shell hidumper -s WindowManagerService -a '-a'

步骤2：执行打印状态变量dump信息的命令。

假定激活的窗口id是90，可通过下面的命令dump出自定义组件树和根节点的状态变量的信息。

[h2]状态管理Profiler调优能力

DevEco Studio的Profiler工具可抓取状态变量的变化打点。在Profiler工具中选择ArkUI，则抓取ArkUI State泳道。该泳道主要展示录制期间有哪些状态变量发生变化，和其会触发哪些关联组件刷新，以便开发者根据状态变量关联组件的数量分析当前场景内的更新负载。

状态管理在Profiler工具中，会展示如下信息内容：

名称 含义
Start Time 状态变量修改的时间
Attributes 状态变量的属性名
Owned by Component 状态变量所属自定义组件名
Owned by Class 状态变量所属类名
Property Type 状态变量装饰器名称
Current Values 状态变量当前值

录制ArkUI State泳道图步骤如下：

步骤1：点击ArkUI模板创建session，并启动录制。录制过程中点击第一个Text组件，修改状态变量@State message为hello world1，通知其同步对象@Link message的变更，及其关联组件的刷新。

步骤2： 录制结束等待数据处理完成，ArkUI State泳道会记录状态变量变化的事件打点。

图1 录制ArkUI State泳道流程示意图

步骤3：选中状态变量变化的打点，将显示当前状态变量更新触发了哪些组件的刷新，以及对应组件的创建、测量和布局的耗时。

图2 ArkUI State泳道图示意图

由于隐私安全政策，已上架应用市场的应用不支持录制ArkUI State泳道。

[h2]状态管理Inspector调试能力

DevEco Studio的ArkUI Inspector可以显示当前页面自定义组件内的状态变量的详细信息，具体包括以下内容。

名称 含义
decorator 自定义组件内状态变量装饰器，如@State、@Link等。
name 自定义组件内状态变量的属性名，如@State message: string = 'hello world';中message。
value 当前状态变量值。对于超长或者嵌套多层的复杂类型会进行截断。
mode

状态变量观察模式，包括：

Compatible Mode：状态管理V1状态变量，且其装饰变量的类型没有@Track装饰的属性。

Track Mode：状态管理V1状态变量，且其装饰的类型有@Track装饰的属性。

V2：状态管理V2状态变量。
elmtIds

状态变量关联的组件。声明式UI语法规则中，状态会驱动UI刷新。

目前状态管理可以做到组件级别的更新，即状态变量变化后仅会触发使用该变量的组件的刷新。
syncPeers 状态变量同步对象，仅限状态管理V1的状态变量。例如@State的同步对象为@Link。

打开ArkUI Inspector展示@Component Page自定义组件状态变量相关信息如下。

图3 ArkUI Inspector显示状态变量相关信息

由于隐私安全政策，已上架应用市场的应用不支持使用ArkUI Inspector。

以上主要介绍了状态管理的hidumper、调试与调优能力，这些工具方便开发者调测，有助于提升开发高性能应用的效率。

Trace调试能力

ArkUI内部针对关键的UI处理流程添加了Trace信息，帮助开发者通过Trace工具观测应用的UI耗时，辅助定位问题。详细Trace说明及案例参考：常用Trace使用指导。

Inspector调试能力

ArkUI Inspector是DevEco Studio内置的页面布局检查工具，帮助开发者查看应用的UI层级结构、组件属性和布局效果。详细Inspector使用方法及案例参考：页面布局检查器ArkUI Inspector使用指导。