Web App Manifest 图标预览 - 模拟主屏图标效果

虚拟滚动是一种只渲染可见区域内列表项的前端性能优化技术。它通过在滚动过程中动态创建和回收 DOM 节点，使得无论数据总量多大，DOM 中始终只维护有限数量的节点。虚拟滚动的核心算法包括：根据滚动位置计算可见范围、从数据源获取可见范围内的数据、复用或创建 DOM 节点、设置节点的位置和内容。虚拟滚动可以将渲染一个万级数据列表的 DOM 节点数量从上万个降低到几十个，显著减少内存占用和渲染开销，提升列表的滚动性能和用户体验。

视口是用户可见的列表区域，也称为可视窗口或可见区域。在虚拟滚动的上下文中，视口是滚动容器中当前可见的部分。虚拟滚动算法根据视口的大小和滚动位置来计算哪些列表项应该在视口中显示。视口的大小通常等于滚动容器的高度（对于垂直滚动列表）或宽度（对于水平滚动列表）。视口大小可能因为窗口调整、容器样式变化等原因动态改变，虚拟滚动算法需要响应这些变化并重新计算可见范围。

缓冲区是虚拟滚动中在可见区域之外额外渲染的区域。缓冲区的作用是提前渲染即将进入可见区域的列表项，避免用户在快速滚动时看到空白区域。缓冲区的大小通常用列表项的数量或像素值来表示。较大的缓冲区可以提供更平滑的滚动体验（因为更多列表项已提前渲染），但会增加 DOM 节点数量和内存占用。较小的缓冲区可以节省内存，但快速滚动时可能出现短暂的空白。开发者需要根据实际场景选择合适的缓冲区大小，通常缓冲区为可见区域高度的 20% 到 50% 比较合适。

DOM 回收是虚拟滚动的核心机制之一，指当列表项滚动出可见区域后，其对应的 DOM 节点不被销毁，而是被回收并重新赋予新的数据和索引，用于显示即将进入可见区域的新列表项。DOM 回收避免了频繁创建和销毁 DOM 节点的开销。在实现上，通常维护一个"池"（DOM Pool）来存储已回收的节点。当需要渲染新的列表项时，先从池中取出已有的节点，更新其内容和属性后使用。如果池中没有可用的节点，才创建新的节点。DOM 回收使得虚拟滚动在任意滚动位置都只需要维护恒定数量的 DOM 节点。

帧率是每秒渲染的画面帧数，是衡量页面渲染性能的核心指标。流畅的交互体验通常需要 60fps 的帧率，即每 16.67ms 渲染一帧。如果渲染一帧的时间超过 16.67ms，帧率就会低于 60fps，用户会感觉到页面卡顿。在大数据量列表的场景下，普通渲染方式在滚动时可能需要几十甚至上百毫秒来处理 DOM 更新和重排，导致帧率大幅下降。虚拟滚动通过减少 DOM 操作量，将每帧的渲染时间控制在几毫秒以内，确保帧率稳定在 60fps 附近。帧率是评估虚拟滚动效果的最直观指标。

重排是浏览器重新计算页面中元素的几何属性（位置、大小）的过程。当页面的布局发生变化时（如添加/删除 DOM 元素、修改元素尺寸、改变窗口大小等），浏览器需要重新进行布局计算。重排是一个代价较高的操作，因为它可能影响页面中的其他元素，导致连锁反应。在大数据量列表中，每次滚动触发的 DOM 更新都可能导致大量元素的重排，这是普通渲染方式帧率低的主要原因之一。虚拟滚动通过精确控制 DOM 的变化范围，将重排的影响限制在最小区域内，显著减少了重排的开销。

重绘是浏览器重新绘制页面元素的视觉外观的过程。当元素的颜色、背景、边框等视觉属性发生变化时，需要进行重绘。重绘不涉及布局计算，因此比重排更快，但在大面积重绘时仍然可能影响性能。在列表滚动场景中，新进入可见区域的列表项需要被绘制。虚拟滚动通过控制可见区域内的元素数量来限制每帧的重绘面积，确保重绘操作能在一帧的时间内完成。虚拟滚动还可以利用 CSS transform 属性进行合成层的移动，避免触发重排和重绘，进一步提升滚动性能。

空白区域是虚拟滚动中常见的视觉问题，指用户在快速滚动时看到的没有内容的区域。产生空白区域的原因是虚拟滚动需要时间来渲染新进入可见区域的列表项，如果滚动速度超过了渲染速度，就会出现可见区域中部分位置没有已渲染内容的情况。解决空白区域问题的方法包括：增大缓冲区大小以提前渲染更多列表项、使用 requestAnimationFrame 优化渲染调度、在滚动过程中使用占位符保持内容填充、使用 CSS transform 实现平滑的位置过渡等。本工具展示了空白区域的产生条件和解决方法。

滚动锚定是一种保持用户滚动位置稳定性的技术。在虚拟滚动中，当列表项的高度发生变化或列表内容动态更新时，用户的滚动位置可能会发生意外偏移，导致用户看到的内容突然变化。滚动锚定通过选择一个"锚点"元素（通常是视口顶部附近的某个列表项），在内容变化后重新计算并恢复正确的滚动位置，确保用户看到的内容保持不变。滚动锚定是动态高度虚拟滚动实现中需要特别关注的问题。现代浏览器（Chrome 56+）提供了原生的 CSS scroll-behavior: auto 来支持基本的滚动锚定行为。

Intersection Observer 是浏览器提供的用于异步监听元素与视口或父元素交叉状态变化的 API。在虚拟滚动的实现中，Intersection Observer 可以用来检测列表项是否进入或离开可见区域。与传统的 scroll 事件监听相比，Intersection Observer 不需要在每次滚动时执行计算，而是由浏览器在合适的时机异步通知交叉状态的变化，性能更优。但 Intersection Observer 在某些虚拟滚动实现中可能不够精确，特别是需要精确控制可见范围和缓冲区大小的场景。本工具对比了基于 scroll 事件和基于 Intersection Observer 两种虚拟滚动实现方式的差异。