一、核心概念与适用场景

1. 按需加载原理LazyForEach 仅渲染当前可视区域及缓存区（cachedCount）内的组件，滚动时动态创建/销毁，大幅降低内存占用。与 ForEach 对比 ：特性ForEachLazyForEach数据加载一次性全量加载按需分批加载内存占用高（组件常驻内存）低（仅活跃组件保留）适用数据量<100条>100条（万级数据仍流畅）首屏耗时5841ms（万条）1339ms（↓77%）
2. 适用场景长列表（聊天记录、商品列表）、瀑布流布局（Grid/WaterFlow）。高复杂度子项（含多图、嵌套组件）或弱网环境下的图片列表。

二、关键优化技术

1. 缓存策略 cachedCount

• 作用：预加载屏幕外数据，减少滑动白块。
• 黄金法则 ：一屏显示6条 → 设置 cachedCount=3（缓存半屏数据）。含图片/视频 → 增大至 cachedCount=5~6。
• 性能收益 ：丢帧率从 6.6% → 3.7%（缓存3条时）。

List() {
  LazyForEach(this.dataSource, ...)
}
.cachedCount(3)  // 关键设置

2. 键值生成器 keyGenerator

• 必须为数据项生成唯一键值（如 item.id）：反例：keyGenerator: item => JSON.stringify(item) → 序列化大对象导致性能骤降。正例：keyGenerator: item => item.id（短字符串唯一标识）。
• 未设置后果：组件复用失效 → 滑动卡顿、数据更新错乱。

3. 组件复用 @Reusable

• 原理：回收离开屏幕的组件实例，减少创建开销。
• 实现步骤：@Reusable // 装饰器标记可复用 @Component struct ReusableItem { aboutToReuse(params) { // 复用回调更新数据 this.data = params.data; } build() { ... } }
• 收益：组件创建耗时从 10.2ms → 0.97ms，万条列表丢帧率趋近 0%。

4. 动态预加载（弱网场景必用）

• 解决痛点：cachedCount 无法自适应网络波动，导致白块。
• 方案：实现 IDataSourcePrefetching 接口，分离预取与渲染逻辑：class DataSourcePrefetching implements IDataSourcePrefetching { async prefetch(index: number) { if (item.cachedImage) return; // 避免重复加载 const response = await fetch(item.albumUrl); item.cachedImage = await cacheImage(response.body); // 缓存资源 } cancel(index: number) { ... } // 取消无效请求（快速滑动时） }
• 效果：弱网下滑动白块减少 100%，CPU 占用仅增加 0.16%。

三、特殊场景优化

1. 轮播图（Swiper + LazyForEach）

• 抛滑预加载：利用 onAnimationStart 事件提前加载后续资源：typescriptSwiper() .onAnimationStart((_, targetIndex) => { loadImageAsync(targetIndex + 2); // 预加载后2页资源 })
• 缓存调优：一屏一页时 cachedCount=1~2 最佳（内存与流畅度平衡）。

2. 图片列表白块问题

• 组合方案 ：cachedCount=5 + Prefetcher 动态预加载。子组件检查资源缓存：aboutToAppear() 中跳过已下载资源。
• 效果：首屏耗时仅增加 15ms，彻底消除白块。

四、常见问题与解决

五、最佳实践总结

1. 数据量决策 28：<100条：直接用 ForEach（代码更简单）。>100条：必用 LazyForEach + cachedCount(3~5) + @Reusable。
2. 键值生成铁律 10：禁用 JSON.stringify，推荐 稳定短键值（如数据库主键 id）。
3. 性能监测工具：静态检查：Code Linter 规则 hp-arkui-set-cache-count-for-lazyforeach-grid 。动态分析：DevEco Profiler 检测丢帧率/内存占用。
4. 布局层级控制：使用 RelativeContainer 替代多层嵌套，层级控制在 5~8层内。

优化后万条数据性能提升：内存占用 ↓86%（560MB→78MB），丢帧率 58%→0% 。

通过上述策略，可系统性解决长列表场景下的性能瓶颈，实现 “万级数据丝滑渲染” 的目标 。