虚拟列表是渲染10万条数据的必需方案，核心是用position: absolute+top偏移只渲染可视区域，配合高度缓存、二分查找、DOM复用和requestAnimationFrame节流。
直接用 v-for 或 map() 渲染 10 万条数据，浏览器大概率卡死或崩溃——这不是配置问题，是 DOM 节点数量突破浏览器承载阈值的必然结果。虚拟列表不是“可选优化”，而是必须落地的底线方案。
为什么不能直接用 innerHTML + 循环拼接？
看似绕过框架、更“底层”，实则更危险：
-
innerHTML一次性插入 10 万段 HTML 字符串，JS 引擎需构造巨量字符串，内存峰值飙升（实测 Chrome 中常超 800MB） - 浏览器仍要解析、构建全部 10 万个 DOM 节点，重排重绘压力不减反增（尤其含内联样式或事件绑定时）
- 完全丢失滚动位置映射能力：无法知道当前显示的是第几条，搜索、定位、高亮都无从谈起
- 无缓冲区机制，快速滚动时必然出现白屏或闪烁
position: absolute + top 偏移是最小可行实现
这是所有虚拟列表库（如 vue-virtual-scroll-list、react-window）底层共用的核心技巧，不依赖框架也能手写：
- 外层容器设
height: ${totalHeight}px（totalHeight = data.length * itemHeight），撑起滚动条比例 - 内层渲染区域设
position: absolute，并通过top: ${startIndex * itemHeight}px精确定位可视内容起始位置 - 只对
data.slice(startIndex, endIndex)执行 DOM 创建/复用，其余靠占位高度维持滚动逻辑 - 必须监听
scroll事件，并用requestAnimationFrame节流，否则滚动中高频计算直接拖垮帧率
示例关键片段：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<div id="container" style="height: 600px; overflow-y: auto;">
<div id="scroller" style="position: relative; height: 1000000px;">
<div id="viewport" style="position: absolute; top: 12300px;">
<!-- 只渲染 startIndex=205 到 endIndex=215 的 10 条 -->
<div>item 205</div>
<div>item 206</div>
...
</div>
</div>
</div>动态高度场景下，scrollTop 不再等于 index × itemHeight
只要列表项高度不统一（如含多行文本、图片、折叠面板），上面的线性映射就失效。此时必须建立「索引 → 累计高度」的缓存映射表：
- 首次遍历数据，用
getBoundingClientRect()或离线测量方式记录每项真实高度，并生成前缀和数组offsets[i]（即前 i 项总高度） - 滚动时，用二分查找在
offsets中定位scrollTop对应的startIndex，时间复杂度从 O(n) 降到 O(log n) - 缓存必须可更新：插入/删除/展开某项后，后续所有
offsets都要重算，建议用Map或稀疏数组按需加载 - 实际项目中，90% 的卡顿不是出在渲染，而是出在没做高度缓存或缓存未及时更新
滚动事件监听器里别直接调 slice() 和 innerHTML
这是新手最容易写的“伪虚拟列表”，看着像、跑起来崩：
- 每次
scroll都执行data.slice()+innerHTML = ...，等于反复销毁重建 DOM，失去复用价值 - 应预创建固定数量的
<div> 元素池（比如 20 个），滚动时仅更新它们的 <code>textContent和style.top，避免 layout thrashing - 若用原生 JS，推荐用
document.createDocumentFragment()批量插入，比逐个appendChild快 3–5 倍 - 移动端要注意
touchmove触发频率远高于桌面端scroll，必须加{ passive: true }并确保 handler 内无同步 layout 读取
真正能压住 10 万条数据的虚拟列表，核心不在“渲染多少”，而在“避免重做多少”。DOM 复用、高度缓存、节流策略、被动事件——漏掉任一环，都只是把卡顿从首屏延后到滚动中。
