怎样提升列表组件渲染速度

提升列表组件渲染速度（尤其是长列表 / 大数据量场景）是前端性能优化的重点。下面从原理 → 常用手段 → 框架实践三个层面系统说明。

一、核心思路（先理解瓶颈）

列表渲染慢，通常不是“DOM 太少”，而是：

1. 渲染的 DOM 太多（一次性渲染上千条）
2. 重复渲染（父组件更新导致整个列表重渲染）
3. 复杂计算放在渲染中（filter / sort / map 每次都执行）
4. 布局抖动 & 重排（图片、宽高不确定）

二、通用优化手段（不依赖框架）

1. 虚拟滚动（最重要）

只渲染可视区域内的元素

• 原理：用 scrollTop 计算可见区间，只渲染少量节点
• 效果：10000 条数据也只渲染 20~50 个 DOM

✅ 推荐方案：

• React：react-window、react-virtualized
• Vue：vue-virtual-scroller
• 原生：自己实现 offset + transform

2. 分页 / 懒加载

不适合虚拟滚动时：

• 分页加载
• 上拉加载更多（IntersectionObserver）

3. 避免不必要的重渲染

• 使用 key（稳定、唯一）
• 列表项组件 React.memo / Vue shallowRef
• 父组件状态不下放过多

4. 计算前置 & 缓存

// ❌ 每次渲染都排序
list.sort(...)

// ✅ 只排一次
const sorted = useMemo(() => list.sort(), [list])

• 用 useMemo / computed
• 避免在 render 中做复杂逻辑

5. DOM & CSS 优化

• 固定高度（虚拟滚动友好）
• 避免 :nth-child 复杂选择
• 图片懒加载 loading="lazy"
• 使用 content-visibility: auto

三、React 示例（虚拟列表）

import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={500}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</FixedSizeList>

四、Vue 示例

<virtual-list :size="50" :remain="10">
  <div v-for="item in list" :key="item.id">
    {{ item.text }}
  </div>
</virtual-list>

五、什么时候该优化？

✅ 列表 > 200 条
✅ 滚动卡顿
✅ 内存占用高
✅ 输入/筛选明显延迟

如果你愿意，可以告诉我：

• 使用的框架（React / Vue / 原生）
• 数据量（几百 / 几万）
• 是否固定高度

我可以直接给你可落地的优化方案或代码。