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

04 高效HarmonyOS NEXT编程：ArkTS数据结构优化与属性访问最佳实践

article 2025/3/6 23:18:58

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

概述

本篇文章开启 ArkTS 高性能编程实践系列，专注于探讨在 HarmonyOS NEXT API12+环境下，如何通过优化属性访问和数据结构来提升应用性能。文章以日历组件的开发为例，深入剖析了几种关键的优化策略，旨在指导开发者掌握编写高效代码的方法，从而显著提高应用的响应速度和用户体验。跟随本文，我们一起探索性能优化的奥秘。

属性访问优化

热点循环中常量提取

在循环中频繁访问对象属性会导致性能下降。如果某个属性在循环中不会改变，应该将其提取到循环外部，减少属性访问次数。下面通过日历组件中的日期计算功能来展示这一优化技巧。

反例

// 优化前代码 - 在循环中重复访问对象属性
private calculateMonthDays(year: number, month: number): number {
  // 基础天数
  let days: number = 30;

  // 在循环中重复访问配置对象的属性
  for (let i = 0; i < this.calendarConfig.monthAdjustments.length; i++) {
    // 每次循环都要多次访问calendarConfig对象的属性，性能较差
    if (this.calendarConfig.monthAdjustments[i].month === month) {
      days = this.calendarConfig.monthAdjustments[i].days;
      break;
    }
  }

  // 处理2月份闰年
  if (month === 1 && this.calendarConfig.isLeapYear(year)) {
    days++;
  }

  return days;
}

正例

// 优化后代码 - 提取循环不变量
private calculateMonthDays(year: number, month: number): number {
  // 基础天数
  let days: number = 30;

  // 将频繁访问的属性提取到循环外
  const adjustments = this.calendarConfig.monthAdjustments;
  const adjustment = adjustments.find(adj => adj.month === month);
  if (adjustment) {
    days = adjustment.days;
  }

  // 提取isLeapYear方法引用
  const isLeapYearFn = this.calendarConfig.isLeapYear;
  if (month === 1 && isLeapYearFn(year)) {
    days++;
  }

  return days;
}

避免频繁使用 delete

delete 操作会改变对象的布局，影响运行时优化效果，导致执行性能下降。在 HarmonyOS 应用中，频繁的 delete 操作会增加垃圾回收压力，影响 UI 渲染流畅度。以下是日历组件中处理事件标记的示例：

在实际应用中，我们经常需要管理日历事件，比如添加会议、删除提醒等。使用普通对象和 delete 操作会带来性能问题：

delete 操作会改变对象的内部结构，导致 V8 引擎需要重新优化代码
频繁的 delete 操作会增加内存碎片，影响垃圾回收效率
对象属性的动态删除会使得属性访问变得更慢

反例

// 不推荐的做法 - 使用delete操作
class CalendarEventManager {
  private events: Record<string, Array<string>> = {};

  // 移除指定日期的所有事件
  removeEvents(date: string): void {
    delete this.events[date]; // 不推荐，会改变对象结构
  }

  // 移除指定日期的特定事件
  removeEvent(date: string, eventId: string): void {
    if (this.events[date]) {
      const index = this.events[date].indexOf(eventId);
      if (index > -1) {
        this.events[date].splice(index, 1);
        if (this.events[date].length === 0) {
          delete this.events[date]; // 不推荐，频繁的delete操作
        }
      }
    }
  }
}

正例

// 推荐做法 - 使用HashMap和Set
import HashMap from '@ohos.util.HashMap';
import HashSet from '@ohos.util.HashSet';

class CalendarEventManager {
  private events = new HashMap<string, HashSet<string>>();

  // 移除指定日期的所有事件
  removeEvents(date: string): void {
    this.events.remove(date); // 使用专门的remove方法，性能更好
  }

  // 移除指定日期的特定事件
  removeEvent(date: string, eventId: string): void {
    const dateEvents = this.events.get(date);
    if (dateEvents) {
      dateEvents.remove(eventId);
      if (dateEvents.isEmpty()) {
        this.events.remove(date);
      }
    }
  }

  // 添加事件
  addEvent(date: string, eventId: string): void {
    let dateEvents = this.events.get(date);
    if (!dateEvents) {
      dateEvents = new HashSet<string>();
      this.events.set(date, dateEvents);
    }
    dateEvents.add(eventId);
  }
}

数据结构优化

使用 TypedArray 优化日历渲染

效果图

注意该代码还有未实现的功能，目前只作为演示使用

在日历组件中，我们需要处理大量的日期数据。使用 TypedArray 可以显著提升数据处理性能。TypedArray 相比普通数组有以下优势：

内存效率更高：TypedArray 中的每个元素都是固定大小的，例如 Int8Array 中每个元素占用 1 字节，Int32Array 中每个元素占用 4 字节
数据访问更快：由于元素大小固定，CPU 可以更快地计算出元素的内存位置
数据操作更高效：提供了批量操作方法如 set、subarray 等

在日历组件中，我们使用 TypedArray 来存储以下数据：

daysInMonth：使用 Int32Array 存储每个位置的日期数字（1-31）
selectedDays：使用 Int8Array 存储日期的选中状态（0 或 1）

这种实现方式特别适合日历这种需要频繁更新和访问的场景：

import HashMap from '@ohos.util.HashMap';

@Component
export struct CalendarView {
    // 使用普通属性存储TypedArray数据
    private daysInMonth: Int32Array = new Int32Array(42); // 6周 x 7天
    private selectedDays: Int8Array = new Int8Array(42); // 0: 未选中, 1: 选中

    @State private currentMonth: number = new Date().getMonth();
    @State private currentYear: number = new Date().getFullYear();
    @State private forceUpdate: number = 0; // 用于强制更新视图

    aboutToAppear() {
        this.initCalendarData();
    }

    // 使用HashMap存储事件数据
    private eventMap: HashMap<string, Array<CalendarEvent>> = new HashMap<string, Array<CalendarEvent>>();

    // 初始化日历数据
    private initCalendarData(): void {
        const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
        const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();

        // 使用TypedArray的set方法批量设置数据
        this.daysInMonth.fill(0);
        for (let i = 0; i < daysInMonth; i++) {
           this.daysInMonth[firstDay + i] = i + 1;
        }
        console.log(this.daysInMonth + '')
        this.forceUpdate++; // 触发视图更新
    }

    build() {
        Column() {
            // 日历头部
            Row() {
                Image($r('app.media.startIcon'))
                    .width(24)
                    .height(24)
                    .margin({ right: 16 })
                    .onClick(() => this.changeMonth(-1))

                Text(this.currentYear + '年' + (this.currentMonth + 1) + '月')
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)

                Image($r('app.media.startIcon'))
                    .width(24)
                    .height(24)
                    .margin({ left: 16 })
                    .onClick(() => this.changeMonth(1))
            }.width('100%').justifyContent(FlexAlign.Center).margin({ top: 10, bottom: 10 })

            // 星期标题
            Grid() {
                ForEach(['日', '一', '二', '三', '四', '五', '六'], (day:string) => {
                    GridItem() {
                        Text(day)
                            .fontSize(16)
                            .fontColor('#666')
                    }.width('100%').height(40)
                })
            }.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
            .width('100%').height(40)

            // 日期网格
            Grid() {
                ForEach(Array.from(this.daysInMonth), (day:number, index:number) => {
                    GridItem() {
                        Column() {
                            if (day > 0) {
                                Text(day.toString())
                                    .fontSize(16)
                                    .fontColor(this.selectedDays[index] === 1 ? '#fff' : '#333')

                                // 显示事件标记
                                if (this.hasEvents(day)) {
                                    Circle({ width: 6, height: 6 })
                                        .fill('#f00')
                                        .margin({ top: 2 })
                                }
                            }
                        }.width('100%').height('100%')
                        .justifyContent(FlexAlign.Center)
                        .backgroundColor(this.selectedDays[index] === 1 ? '#007DFF' : '#fff')
                        .borderRadius(4)
                        .onClick(() => this.onDayClick(index))
                    }.width('100%').aspectRatio(1)
                })
            }.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
            .width('100%')
            .padding(10)
        }.width('100%')
    }

    // 检查日期是否有事件
    private hasEvents(day: number): boolean {
        const dateKey = `${this.currentYear}-${this.currentMonth + 1}-${day}`;
        const events = this.eventMap.get(dateKey);
        return events !== undefined && events.length > 0;
    }

    // 处理日期点击
    private onDayClick(index: number): void {
        console.log(index + '')
        if (this.daysInMonth[index] > 0) {
            this.selectedDays[index] = this.selectedDays[index] === 0 ? 1 : 0;
            this.forceUpdate++; // 触发视图更新
        }
    }

    // 切换月份
    private changeMonth(delta: number): void {
        let newMonth = this.currentMonth + delta;
        let newYear = this.currentYear;

        if (newMonth > 11) {
            newMonth = 0;
            newYear++;
        } else if (newMonth < 0) {
            newMonth = 11;
            newYear--;
        }

        this.currentMonth = newMonth;
        this.currentYear = newYear;
          this.initCalendarData();
        this.forceUpdate++; // 触发视图更新

    }
}

// 日历事件接口
interface CalendarEvent {
    id: string;
    title: string;
    time: string;
}