Homepage

Appearance

08 · 优化虚拟列表滚动 ​

字数: 0 字 时长: 0 分钟

一句话 ​

列表 1 万条 若真创建 1 万个 DOM，滚动必卡 → 虚拟列表只渲染视口内 + 缓冲区 的几十条，用 padding/translate 撑开滚动高度。

和你日常工作的关系 ​

表格、下拉、Feed 流。Element Plus el-table-v2、vue-virtual-scroller 都是这原理。面试爱问：为什么快？怎么算 startIndex？

原理三件套 ​

  1. 总高度 = itemCount × itemHeight（固定高）或累加（动态高更难）。
  2. scrollTop → startIndex = floor(scrollTop / itemHeight)。
  3. 只 v-for 从 startIndex 开始的 visibleCount 条，每条 top: index * itemHeight 绝对定位。

演示（必玩） ​

08-virtual-list.html — 左 1 万真实 DOM vs 右仅十几节点，滚动对比；Elements 面板看 DOM 数量。

动态高度 ​

需要 测量 + 缓存每项高度，或用预估高度再纠正（类似知乎方案）。课程 demo3 为完整 Vue 实现。

课程代码 ​

08. 优化虚拟列表滚动/课堂代码/virtuallist-demo1~3/ → npm i && npm run dev

面试 ​

  • 和普通分页区别：滚动连续体验、DOM 恒定少量。
  • 难点：动态高、横向虚拟、与无限加载结合。

课程资料 ​

08. 优化虚拟列表滚动/课件资料/08-技术讲解.md

/次