HTML中使用虚拟列表优化长列表渲染性能的基本思路-html教程-PHP中文网

虚拟列表需固定容器高度并设overflow-y: auto，用二分查找定位可视索引，列表项须用transform定位、禁用margin-top，非数据节点应作为数据项统一处理。

html中使用虚拟列表优化长列表渲染性能的基本思路

虚拟列表不是“给长列表加个加速器”，而是直接砍掉 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 DHTML 页面生成器

生成可在 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，拖垮帧率

别混入非虚拟节点，广告/分组标题要当“数据项”处理

在虚拟列表中间硬塞一个

，会导致索引错位、translateY 偏差、滚动跳变——因为虚拟逻辑只认“纯数据流”。框架如 react-window 或 vue-virtual-scroller 基本不支持 slot 插入非受控内容。
正确做法：把广告、分组标题也作为数据项塞进 items 数组，用 type 字段区分类型，在渲染函数里分支处理
避免在虚拟项内用 v-model 或 ref 直接操作 DOM——节点会被复用，焦点和值容易错乱

position: sticky 在 transform 移动的容器里完全失效，得提到虚拟容器外部单独定位

最容易被忽略的不是怎么写，而是数据源本身：一个 10 万条的响应式数组（比如 Vue 3 的 ref([])）光是代理 getter 就可能吃掉 20ms，这时候该切数据、用 shallowRef，或者干脆换普通数组 + 手动触发更新。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！