鸿蒙 ArkTS 长列表性能优化：渲染、复用与图片加载

<h2>一、长列表为什么容易卡</h2>

<p>长列表是应用中最常见的性能瓶颈：一次性渲染大量节点、图片集中加载、频繁刷新都会造成掉帧。优化的核心思路只有两条——<strong>只渲染可见区域</strong>，<strong>只加载需要的数据</strong>。</p>

<h2>二、用 LazyForEach 替代 ForEach</h2>

<p>ForEach 会一次性创建全部子组件，列表越长越慢；LazyForEach 按需创建，配合 IDataSource 实现数据变更的精准通知。实现数据源时注意：</p>

<ul>

<li>为每条数据提供稳定的唯一键，避免复用错位；</li>

<li>增删改时调用对应的 notifyDataAdd / notifyDataChange / notifyDataDelete；</li>

<li>避免在 getData 中做重计算，数据应提前准备好。</li>

</ul>

<h2>三、组件复用与布局</h2>

<p>列表项尽量保持结构简单，避免深层嵌套；把可复用的部分抽成自定义组件，减少重复创建。固定高度的列表项能让滚动更稳定，必要时用 cachedCount 预加载少量屏外内容，换取滑动流畅度。</p>

<h2>四、分页与预取</h2>

<p>数据不要一次拉全量。采用分页加载，在接近列表底部时预取下一页；加载中显示占位，避免列表跳动。对于本地数据，也建议分批读取，减少首屏压力。</p>

<h2>五、图片懒加载</h2>

<p>图片是列表卡顿的常见来源。实践建议：</p>

<ol>

<li>只在图片进入可视区域时发起加载；</li>

<li>使用合适尺寸的缩略图，避免解码超大原图；</li>

<li>加载完成前显示统一占位，减少布局抖动；</li>

<li>对频繁出现的图片做内存缓存。</li>

</ol>

<h2>六、验证与度量的方法</h2>

<p>优化不能靠感觉。可以用 DevEco Studio 的性能分析工具观察帧率与耗时，重点看首屏渲染时间、滚动时的掉帧点、图片解码耗时。每次只改一个变量，对比前后数据，避免「优化了但不知道有没有用」。</p>

<h2>七、小结</h2>

<p>长列表优化的本质是「按需」：按需渲染、按需加载、按需刷新。把 LazyForEach、分页、懒加载和度量这四件事做好，列表在低端设备上也能保持流畅。</p>