当前位置： 首页 > news >正文

OpenHarmony 使用 ArkUI Inspector 分析布局

news 文章来源：https://blog.csdn.net/OpenHarmony_dev/article/details/132670292 2024/11/3 2:22:56

● 摘要：视图的嵌套层次会影响应用的性能，开发者应该移除多余的嵌套层次，缩短组件刷新耗时。本文会介绍如何使用 ArkUI Inspector 工具分析布局，提示应用响应性能。

● 关键字：列举本文相关的关键字：OpenHarmony HarmonyOS 鸿蒙 Inspector 布局检查器 视图嵌套

概述

应用将布局渲染到屏幕上的流畅度影响用户对质量的感知。建议移除多余的嵌套层次减少视图嵌套层次。视图的嵌套层次会影响应用的性能。因此推荐开发者移除多余的嵌套层次，缩短组件刷新耗时。

如果视图嵌套得很深，会导致花费更多的时间来处理，会增加页面渲染时间。在屏幕刷新率为 120Hz 的设备上，每 8.3ms 刷新一帧，如果视图的嵌套层次多，可能会导致没法在 8.3ms 内完成一次屏幕刷新，就会造成丢帧卡顿，影响用户体验。嵌套视图会创建更多的节点，会增加内存消耗。如果嵌套视图是从服务器获取的，这可能会导致额外的网络延迟，增加页面加载的时间。过多的视图嵌套还可能会使页面的结构和代码变得复杂和难以维护，这可能会导致错误和性能问题的可能性增加。

因此，减少视图嵌套层次非常重要。本文会介绍如何使用 ArkUI Inspector 工具分析布局，提示应用响应性能。

环境准备

从 DevEco Studio 4.0 Beta2 版本开始集成 ArkUI Inspector 工具，可以从OpenHarmony-v4.0-beta2 Release Notes#配套关系部分下载 DevEco Studio 4.0 Beta2 版本。

使用场景

开发者可以使用 ArkUI Inspector，在 DevEco Studio 上查看应用在真机上的 UI 界面显示效果，可以查看查看应用的界面组件树 component tree，还可以查看选定组件的属性信息。

在 ArkUI Inspector 的组件树上选择组件，UI 界面自动框选对应组件，属性列表显示当前组件的属性信息。在 UI 界面点击选择组件，组件树对应组件变化为选中状态，属性列表显示当前组件的属性信息。

ArkUI Inspector 工具非常好用。可以使用它分析布局，减少布局嵌套层次，从而提示应用响应性能。

工具介绍

使用连接线把真机连接到开发 PC，打开 DevEco Studio，在 DevEco Studio 下方点击 ArkUI Inspector，打开 ArkUI Inspector。

点击 RUN 或者 DEBUG 按钮，把应用推包到设备上，在设备应用列表选择当前显示在设备前端的 UI 进程。本文使用的是Sample聊天实例应用，需要选择的进程是 com.samples.chat。

ArkUI Inspector 左侧为当前的组件树结构 Component Tree，中间栏显示当前设备的 UI 显示界面，右侧在选中组件的情况下为当前组件的属性信息。当设备上 UI 发生变化时，可点击中间栏右上角刷新按钮同步设备上的 UI 效果。可以在左侧组件树上选择或直接在 UI 界面点击选择组件。

如果想退出使用 ArkUI Inspector，可以在设备框，点击设备列表的最后一项 Stop inspector，可断开与设备的连接。

性能实践

我们以一个实际案例来看下如何借助 ArkUI Inspector 工具来优化布局。

检出工程Sample聊天实例应用工程代码，使用 DevEco Studio 编译构建，推送到开发板上运行。

我们选择一个简化的场景，打开和一位朋友的聊天窗口，查看历史聊天信息。刷新 ArkUI Inspector 工具中的 UI 界面，如下：可以看出，ListItem 列表项中包含一个 Column->Row，下面又包含 Row 和 Column 子组件。ListItem 列表项下的子组件 Column 这个列容器只包含一个 Row 子组件容器，Column 列容器是不必要的，可以去掉，这样 ListItem 列表项下的子组件直接为 Row 子组件即可，从而减少一个视图嵌套层次。一个嵌套层次的影响，可能对性能的影响微乎其微。本实践仅限于用来演示如何使用 ArkUI Inspector 工具来优化布局。

再看一个例子，在真机上打开Sample聊天实例应用的聊天联系人页面，使用 ArkUI Inspector 工具刷新下 UI 界面。看左侧的组件树，可以查看组件的嵌套层次，最大有 10 层嵌套，就可以考虑小是否可以减少嵌套层次。比如，最顶层的 Row 组件是可以减少的，其他组件也可以类似查看是否必要，没有最优只有更优。

注意事项

1、ArkUI Inspector 仅支持 OpenHarmony API 9 及以上版本的 Stage 工程

2、需要使用 debug 模式编译。

3、已通过 USB 连接设备。

4、使用 DevEco Studio 4.0 Beta2 及以上的版本。

参考资料

[1] Sample聊天实例应用。

[2] 减少视图嵌套层次

[3] OpenHarmony-v4.0-beta2 Release Notes

相关文章：

OpenHarmony 使用 ArkUI Inspector 分析布局

● 摘要：视图的嵌套层次会影响应用的性能，开发者应该移除多余的嵌套层次，缩短组件刷新耗时。本文会介绍如何使用 ArkUI Inspector 工具分析布局，提示应用响应性能。 ● 关键字：列举本文相关的关键字：OpenH…...

编程日记 2023/9/12 0:57:51

Axes3D绘制3d图不出图解决办法【Python】

运行下面一段代码​： import numpy as npimport matplotlib.pyplot as pltfrom mpl_toolkits.mplot3d import Axes3D#这里设函数为y3x2x_data [1.0,2.0,3.0]y_data [5.0,8.0,11.0]​def forward(x): return x * w b​def loss(x,y): y_pred forward(x) …...

编程日记 2023/9/12 0:56:51

Idea中 css 、js 压缩插件会自动生成xxx.min.css、xxx.min.js文件

第一步：下载yuicompressor-2.4.8.jar 下载路径：打开搜索 YUI compressor Maven Repository: Search/Browse/Explore (mvnrepository.com)https://mvnrepository.com/ 找到点击下载即用（如下图） 创建文件夹，放入idea文…...

编程日记 2023/9/12 0:55:50

win11无法加载文件，因为在此系统上禁止运行脚本

问题背景： 最近升级了windows11，文件右键打开终端，默认是使用的powershell。 后面安装npm包依赖的时候，遇到了无法加载文件，因为在此系统上禁止运行脚本。 提示中可以通过访问链接查看：https:\go.micros…...

编程日记 2023/9/12 0:54:49

Spring Boot将声明日志步骤抽离出来做一个复用类

上文Spring Boot日志基础使用 设置日志级别中我们写了个比较基本的日志操作 但也随之产生了一个问题 我们这行代码 能不能不写？ 具体说 我们不希望每个需要日志的类都声明一个在这 看着太不美观了 我们最简单方法当然是继承 我们找个目录创建一个类 叫 BaseClass…...

编程日记 2023/9/12 0:53:47

RabbitMQ实现数据库与ElasticSearch的数据同步和分享文件过期处理

🎈 1 参考文档 RabbitMQ实现数据库与ElasticSearch的数据同步 | Hannya。-CSDN 企业级开发项目实战——基于RabbitMQ实现数据库、elasticsearch的数据同步 | 波总说先赚它一个小目标-CSDN SPringBoot集成RabbitMQ实现30秒过期删除功能 | 军大君-CSDN 🔍 …...

编程日记 2023/9/12 0:52:46

PyCharm集成开发环境安装、启动与设置

作为非开发工程师职业,大家多多少少都会对编程有抵触,其实没有必要对Python有太大的“戒心" ,把Python当做你的一个工具就可以了。——扎克伯格 一、Python的定义： Python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python的设计具有…...

编程日记 2023/9/12 0:51:45

算法与设计分析--实验一

蛮力算法的设计与分析&#xff08;暴力&#xff09; 这次是某不知名学院开学课程的第一次实验&#xff0c;一共5道题&#xff0c;来自力扣 第一题.216组合总和*力扣题目链接 第一道题是经典的树型回溯 class Solution { public:vector<vector<int>> combinatio…...

编程日记 2023/9/12 0:50:44

ElementUI浅尝辄止28：Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。 1.如何使用&#xff1f; 移动到下拉菜单上&#xff0c;展开更多操作。 //通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下&#xff0c;下拉按钮只要hover即可&#xff0c;无需点击也会显示下拉菜…...

编程日记 2023/9/12 0:49:43

jupyter 格式化与快捷键

1、标题&#xff1a; # 一级标题 ## 二级标题 ### 三级标题 2、 加粗文本&#xff1a; **加粗文本** 3、斜体文本&#xff1a; _斜体_ 4、删除线 ~删除线~ 5、高亮文本 高亮文本 6、区块引用 > 我是引用文字 >> 我是第二层 >&g…...

编程日记 2023/9/12 0:48:42

Spring以及SpringBoot/SpringCloud注解

一、SpringBoot/Spring 1、SpringBootApplication 包含Configuration、EnableAutoConfiguration、ComponentScan通常在主类上 其中ComponentScan让Spring Boot扫描到Configuration类并把它加入到程序上下文&#xff0c;如果扫描到有Component Controller Service等这些注解的…...

编程日记 2023/9/12 0:47:41

vim常用操作

一、Esc键 & 命令模式 1.撤销&#xff1a;u 恢复撤销&#xff1a;Ctrl r 2.定位 行首&#xff1a;0 行尾&#xff1a;$ 第7行&#xff1a;7G 3.编辑 下行开始插入&#xff1a; o 删除行&#xff1a;dd 复制3行并粘贴&#xff1a;3yy ---> p 复制单词并粘贴&#…...

编程日记 2023/9/12 0:46:40

Serverless Framework 亚马逊云(AWS)中国地区部署指南

Serverless Framework 亚马逊云(AWS)中国地区部署指南 Serverless Framework 亚马逊云(AWS)中国地区部署指南 前言前置准备 1. 账号的注册2. 全局安装 serverless3. 设置你的系统环境变量4. 设置部署凭证 快速部署一个 hello world 创建入口函数 index.js event 参数context 参…...

编程日记 2023/9/12 0:45:38

【Spring Cloud系统】- 轻量级高可用工具Keepalive详解

【Spring Cloud系统】- 轻量级高可用工具Keepalive详解 文章目录 【Spring Cloud系统】- 轻量级高可用工具Keepalive详解一、概述二、Keepalive分类2.1 TCP的keepalive2.2 HTTP的keep-alive2.3 TCP的 KeepAlive 和 HTTP的 Keep-Alive区别 三、nginx的keepalive配置3.1 nginx保持…...

编程日记 2023/9/12 0:44:36

【JAVA-Day05】深入理解Java数据类型和取值范围

深入理解Java数据类型和取值范围 深入理解Java数据类型和取值范围摘要一、Java的数据类型1.1 存储单位1.2 Java基本数据类型 二、Java的取值范围2.1 变量定义2.2 取值范围验证 三、总结 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb;…...

编程日记 2023/9/12 0:43:14

“JSR303和拦截器在Java Web开发中的应用与实践“

目录 引言JSR303什么是JSR303?为什么要使用JSR303?常用注解快速入门JSR303 拦截器什么是拦截器拦截器与过滤器应用场景快速入门拦截器 总结 引言 在Java Web开发过程中&#xff0c;我们经常会遇到需要对输入数据进行验证和处理&#xff0c;同时需要对请求进行拦截与控制的需…...

编程日记 2023/9/12 0:42:13

第六章 图 六、最小生成树（Prim算法、Kruskal算法）

一、定义 对于一个带权连通无向图G(V,E)&#xff0c;生成树不同&#xff0c;每棵树的权(即树中所有边上的权值之和)也可能不同。设R为G的所有生成树的集合&#xff0c;若T为R中边的权值之和最小的生成树&#xff0c;则T称为G的最小生成树(Minimum-Spanning-Tree, MST)。 二、手…...

编程日记 2023/9/12 0:41:05

机器学习笔记 - 什么是 MLOps？

什么是 MLOps？ Machine learning operations (MLOps) 作为一个新兴领域，MLOps 在数据科学家、机器学习工程师和人工智能爱好者中迅速崛起。MLOps 代表机器学习操作。MLOps 是机器学习工程的核心功能，专注于简化将机器学习模型投入生产、然后维护和监控的过程。MLOps 是一种…...

编程日记 2023/9/12 0:38:31

初阶扫雷（超详解）

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;C语言小游戏 &#x1f388;推荐相关博文&#xff1a;初阶三子棋&#xff08;超详解&#xff09; 初阶扫雷 1.游戏介绍2.基本思路3.实现前的准备4.实现步骤4.1 打印菜单4.2 初始化扫雷棋盘4.3 打印扫雷棋…...

编程日记 2023/9/12 0:37:20

计算机视觉CV：1000字总结介绍

目录 1.CV计算机视觉 2.计算机视觉的应用 3.计算机视觉的基本技术 4.计算机视觉的发展趋势 1.CV计算机视觉 计算机视觉&#xff08;Computer Vision, CV&#xff09;是指通过计算机技术模拟人类视觉&#xff0c;让计算机能够“看”懂和理解图像和视频。计算机视觉发展了多…...

编程日记 2023/9/12 0:36:14

JavaScript 之 Symbol 数据类型

一、简介 ​ symbol类型是ES6新引入的一种基本数据类型&#xff0c;该类型具有静态属性和静态方法。其中静态属性暴露了几个内建的成员对象&#xff0c;静态方法暴露了全局的symbol注册。 ​ symbol类型具有以下特点&#xff1a;① 唯一性&#xff1a;每个symbol值都是唯一的…...

编程日记 2023/9/12 0:34:57

在Docker中运行PostgreSQL数据库

1.下载Docker 2.设置DockerHub账号 3.运行Docker并下载Image 4.启动PostgreSQL Image 5.连接到数据库运行SQL docker run --name some-postgres -p 5432:5432 -e POSTGRES_PASSWORDmysecretpassword -d postgres 开放端口从Docker容器到主操作系统&#xff0c;这将允许我们…...

编程日记 2023/9/12 0:33:44

实现Spring Boot集成MyBatis

引言 在Java开发中&#xff0c;Spring Boot和MyBatis是非常常用的框架。Spring Boot是一个快速开发应用程序的框架&#xff0c;而MyBatis是一个持久化框架&#xff0c;可以方便地操作数据库。本文将介绍如何使用Idea集成Spring Boot和MyBatis&#xff0c;并创建一个简单的示例…...

编程日记 2023/9/12 0:32:44

关于算法的时间复杂度（度量算法执行时间的两种方法、渐进时间复杂度、时间复杂度的几个性质、渐进估算、常见的渐进时间复杂度排序）

目录 度量算法执行时间的两种方法 事后统计法&#xff08;Post Hoc Analysis&#xff09;&#xff1a; 事前统计法&#xff08;Pre Hoc Analysis&#xff09;&#xff1a; 渐进时间复杂度 时间复杂度的几个性质 渐进估算 常见的渐进时间复杂度排序 度量算法执行时间的两…...

编程日记 2023/9/12 0:31:43

SpringBoot项目--电脑商城【显示商品详情功能】

1.持久层[Mapper] 1规划需要执行的SQL语句 根据商品id显示商品详情的SQL语句 SELECT * FROM t_product WHERE id?2 设计接口和抽象方法 在ProductMapper接口中添加抽象方法 /*** 根据商品id查询商品详情* param id 商品id* return 匹配的商品详情&#xff0c;如果没有匹配…...

编程日记 2023/9/12 0:30:42

VLAN笔记

虚拟VLAN 什么是VLAN VLAN的作用 VLAN的优缺点 VLAN的配置方法 VLAN有哪些接口模式 access与trunk接口的区别 Hybrid接口 拓扑实验enspCiscoH3C ​ 什么是VLAN VLAN&#xff08;Virtual Local Area Network&#xff09;又称虚拟局域网&#xff0c;是指在交换局域网的基础上&a…...

编程日记 2023/9/12 0:29:41

分类算法系列⑤：决策树

目录 1、认识决策树 2、决策树的概念 3、决策树分类原理 基本原理 数学公式 4、信息熵的作用 5、决策树的划分依据之一&#xff1a;信息增益 5.1、定义与公式 5.2、⭐手动计算案例 5.3、log值逼近 6、决策树的三种算法实现 7、API 8、⭐两个代码案例 8.1、决策树…...

编程日记 2023/9/12 0:28:35

前端面试（基础）

一、CSS 1.说一下CSS的盒模型。 在HTML页面中的所有元素都可以看成是一个盒子 盒子的组成&#xff1a;内容content、内边距padding、边框border、外边距margin 盒模型的类型&#xff1a; 标准盒模型 margin border padding content IE盒模型 margin content(border…...

编程日记 2023/9/12 0:27:33

element-ui switch开关组件二次封装，添加loading效果，点击时调用接口后改变状态

先看效果&#xff1a; element-ui中的switch开关无loading属性&#xff08;在element-plus时加入了&#xff09;&#xff0c;而且点击时开关状态就会切换&#xff0c;这使得在需要调用接口后再改变开关状态变得比较麻烦。 思路&#xff1a;switch开关外包一层div&#xff0c;给…...

编程日记 2023/9/12 0:26:31

【GAN小白入门】Semi-Supervised GAN 理论与实战

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊🚀 文章来源：K同学的学习圈子论文原文：Semi-Supervised Learning with Generative Adversarial Networks.pdf在学习GAN的时候你有没有想过这样一个问题呢，如果我们生成的图像是带有标签的，例如数…...

编程日记 2023/9/12 0:25:30

石家庄新钥匙做网站/如何在google上免费推广

在企业的相关设置中&#xff0c;若两台物理机&#xff0c;主副之间需要做到文件同步&#xff0c;可以推荐使用Freefilesync作为自动同步设置 话不多说&#xff0c;直接搞机 开始设置好文件比对-点击红色漏斗设置&#xff08;比较/同步&#xff09; 点击确定 手动同步完成 --…...

编程日记 2024/11/3 0:04:14

如何扫描网站漏洞/百度关键字优化

本文将向读者介绍两个方面的内容&#xff0c;如何通过 WebSphere DataPower 实现服务组装&#xff0c;以及如何对一组服务统一安全控制&#xff0c;日志&#xff0c;计费等操作。本文涉及如何在 WebSphere DataPower 中访问外部服务&#xff0c;XSLT 编程扩展以及加密解密&…...

编程日记 2024/11/2 19:37:58

wordpress主机中文网/广东seo点击排名软件哪里好

capture one 20 mac中文版软件介绍 Capture One Pro 20是专业的原始文件转换器和图像编辑软件。它将所有必备工具和高端性能融于一体、使您在一套快捷、灵活且有效的工作流程中捕获、整理、编辑、分享以及打印图像。Capture One Pro 强大且直观的工具组合为专业摄影师所使用、…...

编程日记 2024/11/2 19:24:44

用dw做网站的视频/百度seo快速排名优化软件

中国武术有句名言&#xff1a;“内练一口气&#xff0c;外练筋骨皮”&#xff0c;修炼内功可以让自己比变得更强&#xff01;本文将全面的带领大家了解一下G1这款垃圾收集器&#xff0c;在正式了解G1之前&#xff0c;我们先来回顾一下垃圾回收的相关基础知识。 如何定位内存中…...

编程日记 2024/11/2 18:38:19

微信咋做自己的网站/宣传软文模板

184行前添加&#xff1a; if (asm.GetType().FullName ! "System.Reflection.RuntimeAssembly") continue;忽略错误 缓存的Provider 不能执行 存储过程&#xff0c;报 NotSupportedException("Command tree type " commandTree.GetType() " is not …...

编程日记 2024/11/2 16:06:29

黑龙江省建设安全协会网站/seo需要掌握哪些技术

pomelo(五) Tutorial 2 Treasures #Tutorial 2 -- Treasures ##描述 Treasures 游戏是从 LordOfPomelo 中抽取出来&#xff0c;去掉了大量的游戏逻辑&#xff0c;用以更好的展示 Pomelo 框架的用法以及运作机制。 Treasures 很简单&#xff0c;输入一个用户名后&#xff0c;会…...

编程日记 2024/11/2 11:39:00