FRONTEND LABS / 03

动态虚拟列表

同一份不定高文本，比较全量 DOM 与节点复用。

总数据量
—
实际行节点（含隐藏槽位）
—
当前渲染区间
—
滚动内容高度
—
虚拟列表滚动观察 · 调试模式显示复用槽位

MEASURE, DON'T GUESS

当前环境的测量

先各预热一次，再交替测量三轮。运行时请保持窗口大小与页面可见性不变。

尚未运行，不预填性能数字。

中位数（最小–最大），预热不计入
渲染方式 同步挂载 布局读取 至第二个 rAF 行节点范围

时间来自 performance.now()。第二个 rAF 是帧回调边界，不是绘制完成、行高全部稳定或滚动流畅度。虚拟列表未展示的行高仍为估计。

原始轮次与记录环境

未经汇总的每轮数据；时间单位 ms
轮次 顺序 模式 挂载 布局读取 第二个 rAF 行节点 后代元素
如何复现，怎样理解结果
  1. 固定浏览器、窗口大小与浏览器缩放。关闭调试透视、其他高负载页面和开发者工具的性能录制。
  2. 选择 500、2,000 或 5,000 条。两种模式使用同一数组、行标记和基础样式，都会从顶部重新挂载。数据生成与旧列表销毁不计入挂载时间。
  3. 点击运行对照。程序关闭调试样式，各预热一次，然后按“普通/虚拟、虚拟/普通、普通/虚拟”记录三轮。
  4. 导出 JSON 保存原始轮次、数据版本、浏览器和视口；重复整个实验观察波动。处理器数量由浏览器报告，不代表 CPU 型号。

同步挂载计时覆盖构造列表、插入节点、遥测文字更新及其间触发的布局；随后单独计时读取 scrollHeight，记录该读取与待处理布局的成本。第二个 rAF 耗时从挂载开始计至第二个回调，包含浏览器调度等待。

对照只衡量初始挂载，不推断 FPS、内存、GC 或实际产品表现。保留全部行的普通列表和按需渲染的虚拟列表完成的工作不同；本实验说明这个取舍，不给出“通用加速倍数”。

10 万条模式保留原有探索能力，但不创建 10 万个完整行节点。5,000 条在低性能设备上仍可能短暂停顿；停止按钮会在同步工作返回后响应。