标准答案
- 组件级懒加载适合低频、较重、首屏不必要的组件，例如图表、编辑器、地图、复杂弹窗。
- 大列表首先要分页、筛选和限制 DOM 数量，避免一次渲染上千个复杂节点。
- 虚拟滚动通过只渲染可视区域和缓冲区项目，降低 DOM 数量和更新成本，适合长列表、日志、消息流和表格。
- 虚拟滚动要处理固定高度或动态高度测量、滚动容器、键盘访问、空态和加载更多。
- 优化前要区分瓶颈是包体积、接口慢、DOM 太多、组件更新频繁，还是浏览器布局计算过重。
题目解析
懒加载解决“什么时候加载代码”，虚拟滚动解决“同时渲染多少 DOM”。这两个概念不能混在一起。
复杂表格不一定一上来就做虚拟滚动。很多业务表格通过服务端分页、列裁剪和单元格轻量化就能解决大部分问题。
虚拟滚动会增加滚动、焦点、定位和测试复杂度，要用于数据量确实大的场景。
代码示例
下面是虚拟滚动的核心思想：页面只渲染可视范围切片。
TypeScript
const visibleItems = computed(() => {
const start = Math.max(0, Math.floor(scrollTop.value / itemHeight) - overscan)
const end = Math.min(
list.value.length,
Math.ceil((scrollTop.value + viewportHeight.value) / itemHeight) + overscan
)
return list.value.slice(start, end)
})常见误区
- 把组件懒加载当成大列表优化，结果 DOM 数量仍然很大。
- 列表 key 不稳定，滚动时频繁复用错误或重建节点。
- 为了虚拟滚动牺牲可访问性、定位能力和表格交互，却没有真实数据证明收益。