HTML怎么利用虚拟列表渲染十万条动态内容-html教程-PHP中文网

虚拟列表是渲染10万条数据的必需方案，核心是用position: absolute+top偏移只渲染可视区域，配合高度缓存、二分查找、DOM复用和requestAnimationFrame节流。

html怎么利用虚拟列表渲染十万条动态内容

直接用 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，失去复用价值
应预创建固定数量的 元素池（比如 20 个），滚动时仅更新它们的 textContent 和 style.top，避免 layout thrashing
若用原生 JS，推荐用 document.createDocumentFragment() 批量插入，比逐个 appendChild 快 3–5 倍


移动端要注意 touchmove 触发频率远高于桌面端 scroll，必须加 { passive: true } 并确保 handler 内无同步 layout 读取
真正能压住 10 万条数据的虚拟列表，核心不在“渲染多少”，而在“避免重做多少”。DOM 复用、高度缓存、节流策略、被动事件——漏掉任一环，都只是把卡顿从首屏延后到滚动中。