HarmonyOS NEXT 合理处理高负载组件的渲染

最新推荐文章于 2024-06-30 19:12:44 发布

蜀道山QAQ

最新推荐文章于 2024-06-30 19:12:44 发布

阅读量834

点赞数 7

分类专栏：鸿蒙鸿蒙实战案例文章标签： harmonyos 华为 android 鸿蒙 OpenHarmony 鸿蒙系统

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

版权

鸿蒙同时被 2 个专栏收录

631 篇文章 72 订阅

订阅专栏

鸿蒙实战案例

134 篇文章 10 订阅

订阅专栏

本示例是合理处理高负载组件的渲染文章的示例代码，主要讲解如何通过DisplaySync优化高负载组件的渲染，减少丢帧情况的发生。

效果图预览

使用说明

通过组件复用，加载10年的日历数据，每个复用组件都在aboutToReuse接口中加载一个月的数据。
通过DisplaySync的帧回调接口，在组件复用时将一个月的数据拆成多份，并在每一帧中加载其中一份数据，减少每一帧绘制的组件数量，减少丢帧现象的发生。

实现思路

普通数据加载，

计算未来10年的日历数据（包括农历日期），放入数组中待用。

initCalenderData() {
  hiTraceMeter.startTrace('push_data_direct', 1);
  for (let k = this.currentYear; k < 2035; k++) {
    ...
  }
  hiTraceMeter.finishTrace('push_data_direct', 1);
}

通过List组件，在组件复用的aboutToReuse接口中直接加载数据

...
List() {
  LazyForEach(this.contentData, (monthItem: Month) => {
    ListItem() {
      ItemView({
        monthItem: monthItem,
        currentMonth: this.currentMonth,
        currentDay: this.currentDay
      }).reuseId("reuse_id_" + monthItem.days.length.toString())
    }
  })
}
...

@Reusable
@Component
struct ItemView {
  ...
  aboutToReuse(params: Record<string, Object>): void {
    hiTraceMeter.startTrace("reuse_" + (params.monthItem as Month).month, 1);
    this.monthItem = params.monthItem as Month;
    hiTraceMeter.finishTrace("reuse_" + (params.monthItem as Month).month, 1);
  }
  ...
  build() {
    Flex({ wrap: FlexWrap.Wrap }) {
      ...
    }
  }
}

通过DisplaySync优化列表数据加载，详细代码可参考ReuseFramePage.ets。

计算未来10年的日历数据（包括农历日期），放入数组中待用。

initCalenderData() {
  hiTraceMeter.startTrace('push_data_direct', 1);
  for (let k = this.currentYear; k < 2035; k++) {
    ...
  }
  hiTraceMeter.finishTrace('push_data_direct', 1);
}

通过List组件，使用组件复用的aboutToReuse接口将数据放入一个数组中，不直接修改组件数据

@Reusable
@Component
struct ItemView {
   ...
   aboutToReuse(params: Record<string, Object>): void {
      hiTraceMeter.startTrace("reuse_" + (params.monthItem as Month).month, 1);
      this.temp.push(params.monthItem as Month);
      hiTraceMeter.finishTrace("reuse_" + (params.monthItem as Month).month, 1);
   }
      ...
}

通过DisplaySync的帧回调接口，遍历数组，将每一条数据都拆分成多份，分别放到单独一帧中加载

...
aboutToAppear(): void {
  hiTraceMeter.startTrace("appear_", 1);
  this.displaySync = displaySync.create();
  const range: ExpectedFrameRateRange = {
    expected: 120,
    min: 60,
    max: 120
  };
  this.displaySync.setExpectedFrameRateRange(range);
  this.displaySync.on("frame", () => {
    // 拆分数据，每次只加载5条数据
    ...
  });
  this.displaySync.start();
  ...
  hiTraceMeter.finishTrace("appear_", 1);
}
...

高性能知识点

通过DisplaySync的帧回调接口，将需要加载的大数据拆分成多份小数据，将一份小数据放在一帧中加载，减少每一帧绘制的组件数，从而减少掉帧现象的发生。

工程结构&模块类型

pulltorefreshnews                                  // har类型
|---pages
|---|---GetDate.ets                                // 获取日期数据
|---|---MainPage.ets                               // 首页
|---|---MonthDataSource.ets                        // 懒加载数据类型
|---|---ReuseFramePage.ets                         // 通过DisplaySync优化的页面
|---|---ReusePage.ets                              // 正常加载数据的页面

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（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学习资料