HarmonyOS鸿蒙开发( Beta5版)Navigation组件常规加载与动态加载

2024-08-29 23:20

本文主要是介绍HarmonyOS鸿蒙开发( Beta5版)Navigation组件常规加载与动态加载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

简介

应用在加载页面时,如果引入暂时不需要加载的模块,会导致页面加载缓慢和不必要的内存占用。例如当页面使用Navigation组件时,主页默认加载子页面,此时若子页面使用了Web组件,则会提前加载Web相关的so库,即使并没有进入子页面。 本文推荐使用动态加载解决上述问题,不在进入主页面时就将所有模块都加载进来,而是按需加载模块,增加应用灵活性,提升应用性能。

场景示例

场景示例图

下面示例应用通过Navigation组件常规加载与动态加载的对比,介绍如何在跳转时触发加载方法,实现按需加载子模块。

常规加载

开发者使用Navigation组件时,通常会在主页引入子页面组件,在按钮中添加方法实现跳转。下述代码展示常规加载示例,通过import引入子组件。

  1. 创建子页面,添加一个Web组件,并加载一个在线的H5页面。

    import { webview } from '@kit.ArkWeb'@Builder
    export function buildPage() {WebViewPage()
    }@Component
    export struct WebViewPage {webController: WebviewController = new webview.WebviewController();url: string = 'https://gitee.com/harmonyos-cases/cases';aboutToAppear(): void {webview.WebviewController.initializeWebEngine();webview.WebviewController.prepareForPageLoad(this.url, true, 2);}build() {Column() {Web({ src: this.url, controller: this.webController })}}
    }

  2. 在主页面的Navigation中添加跳转到子页面的代码。

    import { WebViewPage } from './WebViewPage'@Entry
    @Component
    export struct Page1 {pageStack: NavPathStack = new NavPathStack();@BuilderpageMap() {NavDestination() {WebViewPage()}}build() {Stack() {Navigation(this.pageStack) {Column() {Button('加载页面').onClick(() => {this.pageStack.pushPath({ name: "" })}).margin({top:30})}.height('100%').width('100%')}.navDestination(this.pageMap)}}
    }

编译运行后,通过DevEco Studio中的Profiler工具抓取Trace,可以得到图1。通过图中泳道可以看到,主页面加载完成共耗时22.9ms(从DispatchTouchEvent标签到sendCommands标签,即从点击进入页面到通知系统开始渲染页面)。其中,load page标签表示加载整个页面的时间,共耗时19ms。继续向下可以看到,虽然主页面并没有使用Web组件,但是依旧加载了libwebview_napi.z.so,耗时大概12ms左右。如果用户只是在主页面停留,并没有继续进入子页面,那么这个so库的初始化就是没有必要的,但是依旧产生了耗时,并且占用了一部分的内存,会降低应用的性能。

图1 常规加载主页面泳道图

image-20240725204758662

动态加载

由于Navigation组件一次性加载所有模块,使用常规加载会导致主页加载耗时变长。为了减少主页面加载耗时,可以使用动态加载,在实际页面跳转时再按需动态引入子组件,优化用户的首次加载速度体验。下面将使用动态import的方式实现常规加载的功能。

@Entry
@Component
export struct Page2 {pageStack: NavPathStack = new NavPathStack();@BuilderParam page: ESObject;@BuilderpageMap() {NavDestination() {this.page();}}build() {Navigation(this.pageStack) {Column() {Button('加载页面').onClick(async () => {import('./WebViewPage').then((result: ESObject) => {this.page = result.buildPage;this.pageStack.pushPath({ name: '' })})}).margin({top: 30})}.height('100%').width('100%')}.navDestination(this.pageMap)}
}

通过代码可以看到,在主页面中并没有直接import子页面,而是在点击事件中使用了动态import的方式加载子页面,再通过NavPathStack.pushPath方法进行了跳转。编译运行后,通过DevEco Studio中的Profiler工具抓取Trace,可以得到图2。通过图中泳道可以看到,使用动态import后,主页面加载耗时只有7.9ms。相较于常规加载,耗时减少了15ms。

继续查看下面的泳道,可以发现相较于常规加载,并没有加载libwebview_napi.z.so的耗时,而是直接开始创建主页中的组件(Build[page]标签)。因为代码里没有直接使用import引入子页面,而是通过动态import的方式将加载子页面的逻辑放在了点击事件里面。只有在进入子页面时才会触发WebView库的加载,如图3所示,实现了按需加载,减少了主页面不必要的耗时和内存占用。

图2 动态加载主页面泳道图

di1

图3 动态加载子页面泳道图

di2

性能对比

主页面加载耗时主页面so加载耗时
常规加载22.9ms12ms
动态加载7.9ms0ms

总结

通过上面的示例可以看到,使用动态import能够更灵活地按需加载子页面,减少主页面的加载耗时,提升应用性能和用户体验。当子页面不会被马上使用或者可能占用大量内存时,可以通过动态import的方式进行性能方面的优化。

最后

小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,教授的人也多,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。 

为了确保高效学习,建议规划清晰的学习路线,涵盖以下关键阶段:

希望这一份鸿蒙学习文档能够给大家带来帮助~


 鸿蒙(HarmonyOS NEXT)最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案

路线图适合人群:

IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术

2.视频教程+学习PDF文档

(鸿蒙语法ArkTS、TypeScript、ArkUI教程……)

 纯血版鸿蒙全套学习文档(面试、文档、全套视频等)

                   

鸿蒙APP开发必备

​​

总结

参与鸿蒙开发,你要先认清适合你的方向,如果是想从事鸿蒙应用开发方向的话,可以参考本文的学习路径,简单来说就是:为了确保高效学习,建议规划清晰的学习路线

这篇关于HarmonyOS鸿蒙开发( Beta5版)Navigation组件常规加载与动态加载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1119140

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

动态规划---打家劫舍

题目: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你 不触动警报装置的情况下 ,一夜之内能够偷窃到的最高金额。 思路: 动态规划五部曲: 1.确定dp数组及含义 dp数组是一维数组,dp[i]代表

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来