技能介绍

问题从哪来

当列表长到 500+ 条 时，常见症状是滚动掉帧、DOM 节点暴涨、内存随条目数 O(n) 增长。全量挂载每一行在数据量上万时几乎不可维护，但盲目上虚拟化也会踩 SEO、可访问性和浏览器 Ctrl+F 的坑。

技能在做什么

本技能把「该不该虚拟化」和「怎么落地」拆成可执行的检查清单：

先量瓶颈：确认规模与症状（掉帧、节点过多、内存飙升）再引入窗口化，避免为小列表过度工程。
库选型：固定行高优先 react-window；可变/动态高度、跨框架或复杂场景用 TanStack Virtual；遗留栈可继续维护 react-virtualized。
参数与容器：明确 item size、overscan、滚动容器高度、key、resize 与测量 ref 的透传；Row 根元素必须接住虚拟库下发的 style / measure ref。
无限滚动：数据分页（拉取下一页）与 DOM 虚拟化 分离；需要时可与数据获取类 workflow 联用。
验收：对照 DOM 节点数、滚动 FPS，并检查键盘导航、屏幕阅读器；复杂场景可加载 references/virtualization-patterns.md 查固定/动态高度、网格等模式。

边界与代价

虚拟列表里 未挂载的行不在 DOM 中，原生 Ctrl+F 搜不到这些内容；若 SEO 或首屏关键文案只写在虚拟项里，爬虫与用户搜索都会吃亏。overscan 过大浪费内存，过小容易滚动白屏；动态高度要配合 ResizeObserver，并处理测量带来的布局抖动。合理实施后，目标是万级列表滚动接近 60fps，节点与内存落在可视区及缓冲范围内，而非条目总数。