本文转载自《#2023 盲盒+码 # OpenHarmony使用ArkUI Inspector分析布局》，作者：zhushangyuan_

OpenHarmony使用ArkUI Inspector分析布局

● 摘要：视图的嵌套层次会影响应用的性能，开发者应该移除多余的嵌套层次，缩短组件刷新耗时。本文会介绍如何使用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分析布局的更多相关文章

  1. OpenHarmony标准设备应用开发（二）——布局、动画与音乐

    (以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHar ...

  2. Android布局文件的载入过程分析:Activity.setContentView()源代码分析

    大家都知道在Activity的onCreate()中调用Activity.setContent()方法能够载入布局文件以设置该Activity的显示界面.本文将从setContentView()的源代 ...

  3. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  4. duilib各种布局的作用，相对布局与绝对布局的的意义与用法

    大多数刚使用duilib的朋友时候非常依赖duilib自带的设计器,用他可以拖拉控件,可视化的做出自己想要的界面.可是用一段时间就会发现原带的设计器有很多bug,时不时会崩溃,支持的控件数量有限,属性 ...

  5. 简单研究Android View绘制三 布局过程

    2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /* ...

  6. Android布局6大类

    1:在我们Android开发中,常见的布局的方式有6大类 线性布局LinearLayout 相对布局RelativeLayout 表格布局TableLayout 单帧布局FrameLayout 绝对布 ...

  7. [置顶] Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...

  8. Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前, 视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit ...

  9. Android Studido下的应用性能优化总结--布局优化

    前言:一个应用的成功=产品设计*性能 ,再此我们不讨论一个应用的设计,那交给我们可爱又可恨的产品经理和UI设计师来决定!所以这里分步骤讨论如何提升一个应用的性能,这里先探讨布局优化问题. 布局优化 避 ...

  10. Android中View绘制优化之一---- 优化布局层次

    本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 前言,竟然是翻译,当然得弄的有板有眼. 照着大作家格式来咯 , - - . 译序 最近一直在做锁屏界面,之前也 ...

随机推荐

  1. mysql-数据类型，类型约束，联合唯一约束，表与表之间的关系，存储引擎---day36

    # ### char varchar(补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 数据类型 -时间 date YYYY-MM-DD 年月日(结 ...

  2. 狂神说Git学习笔记整理

    Git 版本控制 ​ 在开发过程中,项目会进行版本迭代,新版本会取代旧版本,但是我们不希望直接删除旧版本,所以就需要一个版本管理器来管理新旧版本,不然就是手动控制... 多人开发必须使用版本控制!!! ...

  3. 基于Python GDAL为长时间序列遥感图像绘制时相变化曲线图

      本文介绍基于Python中gdal模块,对大量多时相栅格图像,批量绘制像元时间序列折线图的方法.   首先,明确一下本文需要实现的需求:现有三个文件夹,其中第一个文件夹存放了某一研究区域原始的多时 ...

  4. 面试官：说说volatile底层实现原理？

    在 Java 并发编程中,有 3 个最常用的关键字:synchronized.ReentrantLock 和 volatile. 虽然 volatile 并不像其他两个关键字一样,能保证线程安全,但 ...

  5. 「实操」结合图数据库、图算法、机器学习、GNN 实现一个推荐系统

    本文是一个基于 NebulaGraph 上图算法.图数据库.机器学习.GNN 的推荐系统方法综述,大部分介绍的方法提供了 Playground 供大家学习. 基本概念 推荐系统诞生的初衷是解决互联网时 ...

  6. UI自动化测试中图片验证码的处理？

    首先定位验证码image的元素,然后通过element.screenshot('a.png')截图保存到本地,通过第三方接口识别本地图片验证码

  7. elementPlus配合vue-router搭建后台系统菜单模块

    设置menuType来区分菜单类型 /** * @params menuType * -1 一般为首页 / -> /home 只显示第一个子项 * -2 为无子菜单的菜单项 /config -& ...

  8. 基于2.4G私有协议的无线取餐系统设及实现

    前记  最近在使用TLSR8355做几个小产品.正好赶上有客户需要一个无线取餐系统解决方案.笔者分析了一下需求.该芯片有充足的按键,LED灯,GPIO接口等.做这一款产品是顺道的事情. 需求梳理  功 ...

  9. python getOpenFileNames 获取文件实例解析

    一 概念 选取文件夹 QFileDialog.getExistingDirectory() 选择文件 QFileDialog.getOpenFileName() 选择多个文件 QFileDialog. ...

  10. Node.js解压版的环境配置及相关常用命令

    下载 进入node.js官网的下载页面node.js下载页面,选择合适的版本进行下载 配置 1.设置环境变量 随便找一个地方,将文件解压出来 复制当前的路径,我的电脑右键,打开属性,左边有个高级系统配 ...