虚拟列表需固定容器高度并设overflow-y: auto，用二分查找定位可视索引，列表项须用transform定位、禁用margin-top，非数据节点应作为数据项统一处理。
虚拟列表不是“给长列表加个加速器”，而是直接砍掉 95% 以上的 DOM 节点——只渲染当前滚动可视区域那几十条，其余全靠 transform: translateY() 和占位撑高来“假装”存在。
滚动容器必须设固定高度 + overflow-y: auto
这是所有计算的前提。浏览器只有在明确的滚动上下文中，才能提供准确的 scrollTop 值。如果容器是 height: auto、min-height 或嵌套在 flex/auto 高度父容器里，scrollTop 会跳变或归零，整个可视索引计算就崩了。
- 正确写法：
height: 600px; overflow-y: auto;，且该元素不能被父级overflow: hidden裁剪 - React 中用
ref绑定时，必须指向这个带overflow的容器，不是外层 wrapper - Vue 中若用
v-virtual-scroll，需确认插件文档是否要求 wrapper 元素显式设高
可视区域起始索引必须用二分查找，不能 for 循环
当数据量到 10 万条，每次滚动都执行 for (let i = 0; i 找起始项，JS 主线程直接卡死。等高场景可直接除法，但变高场景必须依赖前缀和数组 + 二分定位。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 等高：起始索引 =
Math.floor(scrollTop / itemHeight) - 变高：构建高度前缀和数组（如
[0, 48, 96, 142, ...]），再对它调用binarySearch(scrollTop) - 别用
Array.prototype.findIndex——它是线性遍历，O(n)；Lodash 的sortedIndex或手写带边界检查的二分函数更稳
列表项必须用 transform 定位，禁用 margin-top 累加
用 margin-top 推动每一项位置，等于让浏览器每帧都重排整个容器；而 transform: translateY() 是合成层操作，不触发重排，性能差一个数量级。
立即学习“前端免费学习笔记（深入）”；
- 所有列表项统一用
position: absolute，top 由计算出的偏移量决定 - 容器本身要设
contain: layout paint，告诉浏览器“不可见区域不用绘制” - 滚动监听必须加
{ passive: true }，否则 Chrome 会强制同步执行 handler，拖垮帧率
别混入非虚拟节点，广告/分组标题要当“数据项”处理
在虚拟列表中间硬塞一个 <div class="ad-banner">，会导致索引错位、<code>translateY 偏差、滚动跳变——因为虚拟逻辑只认“纯数据流”。框架如 react-window 或 vue-virtual-scroller 基本不支持 slot 插入非受控内容。
- 正确做法：把广告、分组标题也作为数据项塞进
items数组，用 type 字段区分类型，在渲染函数里分支处理 - 避免在虚拟项内用
v-model或ref直接操作 DOM——节点会被复用，焦点和值容易错乱 -
position: sticky在transform移动的容器里完全失效，得提到虚拟容器外部单独定位
最容易被忽略的不是怎么写，而是数据源本身：一个 10 万条的响应式数组（比如 Vue 3 的 ref([])）光是代理 getter 就可能吃掉 20ms，这时候该切数据、用 shallowRef，或者干脆换普通数组 + 手动触发更新。
