鸿蒙next开发：如何提高运行时动态加载页面性能？

最新推荐文章于 2024-08-13 09:05:32 发布

蜀道山QAQ

最新推荐文章于 2024-08-13 09:05:32 发布

阅读量890

点赞数 24

分类专栏：鸿蒙文章标签： harmonyos 华为 android 驱动开发鸿蒙前端

本文链接：https://blog.csdn.net/shudaoshanqaq/article/details/139455626

版权

鸿蒙专栏收录该内容

631 篇文章 78 订阅

订阅专栏

应用在加载页面时，如果引入大量暂不需要加载的模块，会因过多模块导致页面加载缓慢。比如当页面在使用Navigation组件时，主页默认先加载所有页面，此时若包含大量子页面，仅加载主页这一项就需要很长时间，但这些复杂的子页面与主页渲染无关。本文推荐使用动态加载解决上述问题，不在应用程序加载时就将所有模块都加载进来，而是按需加载模块，增加应用灵活性，提升应用性能。

场景示例

主页	子页面

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

常规加载

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

加载模块引入子页面，Navigation组件使用这些子模块实现跳转子页面功能，但用户进入主页时并不会马上使用到这些模块，存在冗余加载影响性能的可能。
```
import { pageOne, pageOneData } from './pageOne';
import { pageTwo, pagesTwoData } from './pageTwo';
...
import router from '@ohos.router';
```

主页通过Navigation组件实现点击Button跳转到不同的子页面。

@Provide('pathInfos') pageInfos: NavPathStack = new NavPathStack();

@Builder
PageMap(name: string) {
  if (name === 'pageOne') {
    pageOne(new pagesOneData(name, this.pageInfos));
  } else if (name === 'pageTwo') {
    pageTwo(new pagesTwoData(name, this.pageInfos));
  }
  ...
}

build() {
  Navigation(this.pageInfos) {
    Button('返回', { stateEffect: true, type: ButtonType.Capsule })
      .onClick(() => {
         router.back();
      })
    Column() {
      Button('pageOne', { stateEffect: true, type: ButtonType.Capsule })
        .onClick(() => {
           this.pageInfos.pushPath({ name: 'pageOne' }); // 将name指定的NavDestination页面信息入栈
        })
      Button('pageTwo', { stateEffect: true, type: ButtonType.Capsule })
        .onClick(() => {
           this.pageInfos.pushPath({ name: 'pageTwo' });
        })
      ...
    }
  }.title('主页').navDestination(this.PageMap)
}

动态加载

当子组件较多、较复杂时，由于Navigation组件一次性加载所有模块，使用常规加载会导致主页加载缓慢。为了减少主页渲染时间，可以使用动态加载，在实际页面跳转时再按需动态引入子组件，优化用户的首次加载速度体验。以下是动态加载实现步骤：

将需要被动态加载的组件pageOne组件用PageOneLoader函数封装，当PageOneLoader被调用时，会渲染pageOne页面。
```
import { pageOne } from './pageOne';

@Builder
export function PageOneLoader() {
  pageOne();
}
```
由于在Navigation的PageMap中navDestination无法直接动态加载组件（import是函数，组件中无法引用函数），此处采用声明 @BuilderParam PageOneLoader 函数，在点击时初始化此函数，此时navDestination中可以调用 this.PageOneLoader() 从而加载组件pageOne。在主页DynamicHome实现动态加载pageOne的步骤如下：
a) 在主页DynamicHome中定义组件加载函数 @BuilderParam PageOneLoader: () => void ，用来承接await import异步导入pageOneLoader的结果。
```
@BuilderParam PageOneLoader: () => void;
```
b) 定义异步函数，点击时为PageOneLoader初始化。
```
async loadPageOne(key: string){
  if (key === "pageOne") {
    let PageObj: ESObject = await import("../pages/PageOneLoader");
    this.PageOneLoader = PageObj.PageOneLoader;
  }
}
```
c) 点击按钮触发点击函数，调用loadPageOne，此时真正的初始化 @BuilderParam PageOneLoader ，并使用Navigation加载组件。
```
private onEntryClick(): void {
  try {
    this.loadPageOne('pageOne');
    this.pageInfos.clear();
    this.pageInfos.pushPathByName('pageOne', '');
    logger.info('DynamicImport Success');
  } catch (error) {
    logger.info('DynamicImport Fail');
  }
}
```
d) 触发PageMap中已经被初始化的PageOneLoader函数，动态加载pageOne组件。
```
@Builder
PageMap(name: string) {
  if (name === 'pageOne') {
    this.PageOneLoader();
  }
}
```

完整的DynamicHome主页代码如下：

import router from '@ohos.router';
import { logger } from '../../ets/utils/Logger';

@Entry
@Component
struct DynamicHome {
  @Provide('pathInfos') pageInfos: NavPathStack = new NavPathStack();
  @State active: boolean = false;
  @BuilderParam PageOneLoader: () => void;

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      this.PageOneLoader();
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('返回', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            router.back();
          })
        Button('PageOne-动态', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.onEntryClick();
          })
      }
    }.title('HOME').navDestination(this.PageMap)
  }

  async loadPageOne(key: String) {
    if (key === "pageOne") {
      let PageObj: ESObject = await import("../pages/PageOneLoader");
      this.PageOneLoader = PageObj.PageOneLoader;
    }
  }

  // 触发动态加载
  private onEntryClick(): void {
    try {
      this.loadPageOne('pageOne');
      this.pageInfos.clear();
      this.pageInfos.pushPathByName('pageOne', '');
      logger.info('DynamicImport Success');
    } catch (error) {
      logger.info('DynamicImport Fail');
    }
  }
}

当子页面逐渐增多时，Navigation组件使用常规加载会因默认加载所有子页面导致性能开销增大，主页内存占用增加，加载时间变长。此时改用动态加载不再提前加载子页面，可以有效地避免这些任务阻塞主线程，从而降低整体资源消耗，提高主页的加载速度。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料