虚拟滚动实验 Chrome 虚拟滚动实验。 精选 实验 ← Demo 归档

虚拟滚动实验

Chrome 虚拟滚动实验。

更新于 2019-06-01

Web 实验 精选 legacy 实验 精选

新窗口打开 原路径 /static/html/chrome-virtual-scroller.html

简介

虚拟滚动实验：只渲染可视区域附近的列表节点，降低长列表 DOM 开销。适合对照浏览器原生提案与自研方案。

如何测试验证

1. 滚动长列表，观察 DOM 节点数量是否保持在窗口附近。
2. 快速甩动滚动，检查白屏 / 闪烁。
3. 跳转到列表中部 / 底部，确认定位准确。
4. 打开 Performance 面板对比普通列表的 Scripting / Rendering。

相关规范与文档

• MDN: Intersection Observer
• Chrome: Virtual Scroller (blog)
• MDN: DocumentFragment