解决方案

1. 图片内存优化

/**
 * 图片优化加载
 */
@Component
struct OptimizedImage {
  @Prop imageUrl: string;
  @Prop width: number = 100;
  @Prop height: number = 100;
  
  build() {
    Image(this.imageUrl)
      .width(this.width)
      .height(this.height)
      .objectFit(ImageFit.Cover)
      // ✅ 关键优化
      .renderMode(ImageRenderMode.Original)  // 原始渲染
      .interpolation(ImageInterpolation.Low)  // 低质量插值,节省内存
      .syncLoad(false)  // 异步加载
  }
}

/**
 * 缩略图加载策略
 */
@Component
struct ThumbnailImage {
  @Prop imageUrl: string;
  @State isLoadingFull: boolean = false;
  
  build() {
    Stack() {
      // ✅ 先加载小图
      if (!this.isLoadingFull) {
        Image(this.getThumbnailUrl())
          .width('100%')
          .height('100%');
      }
      
      // ✅ 再加载大图
      if (this.isLoadingFull) {
        Image(this.imageUrl)
          .width('100%')
          .height('100%')
          .onComplete(() => {
            // 大图加载完成
          });
      }
    }
    .onClick(() => {
      this.isLoadingFull = true;
    })
  }
  
  getThumbnailUrl(): string {
    return this.imageUrl + '?x-oss-process=image/resize,w_200';
  }
}

2. 列表内存优化

/**
 * 优化的列表
 */
@Component
struct MemoryEfficientList {
  private dataSource: ItemDataSource = new ItemDataSource();
  
  build() {
    List() {
      // ✅ 使用LazyForEach,按需渲染
      LazyForEach(this.dataSource, (item: Item) => {
        ListItem() {
          this.buildListItem(item);
        }
      }, (item: Item) => item.id.toString())
    }
    .cachedCount(5)  // ✅ 只缓存5个
    .onScrollIndex((start, end) => {
      // ✅ 监控可见范围
      console.info(`可见: ${start}-${end}`);
    })
  }
  
  @Builder
  buildListItem(item: Item) {
    Row() {
      // ✅ 图片设置固定大小
      Image(item.image)
        .width(60)
        .height(60)
        .objectFit(ImageFit.Cover);
      
      Text(item.name)
        .layoutWeight(1);
    }
  }
}

3. 及时释放资源

@Entry
@Component
struct ResourceManagement {
  private timer: number = -1;
  private subscription: Object | null = null;
  
  aboutToAppear(): void {
    // 启动定时器
    this.timer = setInterval(() => {
      this.updateData();
    }, 1000);
    
    // 订阅数据
    this.subscription = dataService.subscribe(() => {
      this.handleData();
    });
  }
  
  aboutToDisappear(): void {
    // ✅ 页面销毁时清理资源
    if (this.timer !== -1) {
      clearInterval(this.timer);
      this.timer = -1;
    }
    
    if (this.subscription) {
      dataService.unsubscribe(this.subscription);
      this.subscription = null;
    }
  }
  
  build() {
    Column() {
      Text('内容');
    }
  }
  
  updateData(): void {}
  handleData(): void {}
}

4. 避免内存泄漏

/**
 * ❌ 容易泄漏的写法
 */
class LeakyService {
  private listeners: Array<() => void> = [];
  
  // ❌ 问题:listeners不断增长
  addListener(callback: () => void): void {
    this.listeners.push(callback);
  }
  
  notify(): void {
    this.listeners.forEach(cb => cb());
  }
}

/**
 * ✅ 正确的写法
 */
class SafeService {
  private listeners: Map<string, () => void> = new Map();
  
  // ✅ 使用Map管理,可以移除
  addListener(id: string, callback: () => void): void {
    this.listeners.set(id, callback);
  }
  
  removeListener(id: string): void {
    this.listeners.delete(id);
  }
  
  notify(): void {
    this.listeners.forEach(cb => cb());
  }
  
  clear(): void {
    this.listeners.clear();
  }
}

// ✅ 使用示例
@Component
struct SafeComponent {
  private listenerId: string = `listener_${Date.now()}`;
  
  aboutToAppear(): void {
    safeService.addListener(this.listenerId, () => {
      this.handleUpdate();
    });
  }
  
  aboutToDisappear(): void {
    // ✅ 移除监听器
    safeService.removeListener(this.listenerId);
  }
  
  handleUpdate(): void {}
}

5. 对象池复用

/**
 * 对象池模式
 */
class ItemPool {
  private pool: Item[] = [];
  private maxSize: number = 20;
  
  /**
   * 获取对象
   */
  acquire(): Item {
    if (this.pool.length > 0) {
      // ✅ 从池中复用
      return this.pool.pop()!;
    } else {
      // 创建新对象
      return new Item();
    }
  }
  
  /**
   * 归还对象
   */
  release(item: Item): void {
    if (this.pool.length < this.maxSize) {
      // ✅ 重置并放回池中
      item.reset();
      this.pool.push(item);
    }
  }
  
  /**
   * 清空池
   */
  clear(): void {
    this.pool = [];
  }
}

// ✅ 使用
const itemPool = new ItemPool();

function processItems(count: number): void {
  const items: Item[] = [];
  
  for (let i = 0; i < count; i++) {
    // ✅ 从池中获取
    const item = itemPool.acquire();
    items.push(item);
  }
  
  // 处理完毕后归还
  items.forEach(item => {
    itemPool.release(item);
  });
}

6. 监控内存使用

/**
 * 内存监控工具
 */
export class MemoryMonitor {
  private static checkInterval: number = -1;
  
  /**
   * 开始监控
   */
  static startMonitoring(): void {
    this.checkInterval = setInterval(() => {
      this.checkMemory();
    }, 5000);  // 每5秒检查
  }
  
  /**
   * 停止监控
   */
  static stopMonitoring(): void {
    if (this.checkInterval !== -1) {
      clearInterval(this.checkInterval);
      this.checkInterval = -1;
    }
  }
  
  /**
   * 检查内存
   */
  private static checkMemory(): void {
    // 记录当前内存使用情况
    Logger.debug('Memory', '内存检查');
    
    // TODO: 实际项目中可通过系统API获取内存信息
  }
}

关键优化点

1. 图片优化

// ✅ 优化策略
- 设置合适的尺寸
- 使用缩略图
- 异步加载
- 设置interpolation为Low
- 及时释放不可见图片

2. 列表优化

// ✅ 优化策略
- LazyForEach按需渲染
- cachedCount控制缓存
- 避免ForEach全量渲染
- 滚出屏幕及时回收

3. 资源管理

// ✅ 生命周期管理
aboutToAppear() {
  // 分配资源
}

aboutToDisappear() {
  // ✅ 释放资源
  clearInterval(timer);
  unsubscribe();
}

内存泄漏检查

常见泄漏场景

// ❌ 场景1: 定时器未清理
setInterval(() => {}, 1000);  // 忘记clearInterval

// ❌ 场景2: 事件监听未移除
eventBus.on('update', callback);  // 忘记off

// ❌ 场景3: 闭包持有引用
function createHandler() {
  const largeData = new Array(10000);
  return () => {
    console.log(largeData.length);  // 持有largeData引用
  };
}

// ❌ 场景4: 循环引用
class A {
  b: B | null = null;
}
class B {
  a: A | null = null;
}
const a = new A();
const b = new B();
a.b = b;
b.a = a;  // 循环引用

检查方法

/**
 * 内存泄漏检查清单
 */
const memoryLeakChecklist = {
  timers: '定时器是否清理?',
  listeners: '事件监听是否移除?',
  subscriptions: '订阅是否取消?',
  references: '大对象引用是否清除?',
  circularRefs: '是否存在循环引用?'
};

最佳实践

1. 图片处理

// ✅ 推荐:使用合适尺寸
Image(url)
  .width(100)
  .height(100)
  .objectFit(ImageFit.Cover);

// ❌ 避免:加载大图显示小图
Image(largeImageUrl)  // 2MB图片
  .width(50)          // 显示50x50
  .height(50);

2. 数据管理

// ✅ 推荐:分页加载
async loadData(page: number): Promise<void> {
  const items = await loadPage(page, 20);
  this.dataSource.pushData(items);
}

// ❌ 避免:一次加载全部
async loadAllData(): Promise<void> {
  const items = await loadAll();  // 10000条数据
  this.items = items;  // 内存爆炸
}

3. 组件清理

// ✅ 完整的生命周期管理
@Component
struct SafeComponent {
  private resources: Resource[] = [];
  
  aboutToAppear(): void {
    this.allocateResources();
  }
  
  aboutToDisappear(): void {
    // ✅ 清理所有资源
    this.resources.forEach(r => r.release());
    this.resources = [];
  }
  
  allocateResources(): void {}
}

总结

内存优化要点:

✅ 图片设置合适尺寸 ✅ LazyForEach按需渲染 ✅ aboutToDisappear清理资源 ✅ 避免内存泄漏 ✅ 使用对象池复用