前端怎样优化长列表？
长列表优化的核心目标是：只渲染当前 ” 可见区域 ” + 少量缓存区域的数据与 DOM 元素。 常见的优化手段分为数据层优化和视图层优化两类：
数据层优化
- 分页加载
- 分批次请求数据，控制每页条数
- 懒加载、滚动加载
- 滚动到底时请求下一批
- 可以结合
IntersectionObserver API或者监听scrollTop
视图层优化
- 虚拟列表技术👉虚拟列表实现
- 只渲染可是区域节点，其他节点用占位符撑起高度
- 可用 react-window 或 vue-virtual-scroller 等三方库
回答示例
对于长列表的优化，我会从数据量控制和 DOM 渲染优化两方面入手：
数据量控制上，使用分页加载 + 懒加载减少一次性请求； DOM 渲染上，使用虚拟滚动技术只渲染可见区域，提升性能； 虚拟滚动通常结合滚动容器高度估算、元素复用等机制，可以用现成库如
react-window实现； 若列表项高度不固定，还需要动态测量或手动记录； 综合策略下可以实现高性能的无限滚动体验。
追问 Q1：虚拟列表是怎么避免性能问题的？它的原理你能说一下吗？
虚拟列表只渲染可视区域的固定数量节点，而不需要加载全部节点
Q2：IntersectionObserver 和 scroll 事件谁更好？
IntersectionObserver 更好，但可能存在兼容性问题 IntersectionObserver 由浏览器调度，而 scroll 事件需要手动防抖节流