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

深圳商城手机网站建设广州全屋定制

wzjs 2025/9/2 5:50:11

深圳商城手机网站建设,广州全屋定制,中国室内设计师官网,晋江文学城官网温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！ 目录概述属性访问优化热点循环中常量提取反例正例避免频繁使用 delete反例正例数据结构优化使用 TypedArray 优化日历渲染效果图性能优化效果 …

温馨提示：本篇博客的详细代码已发布到 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;
}