虚拟列表渲染是一种优化长列表性能的技术，其核心在于仅渲染可视区域内的列表项。1. 监听滚动事件；2. 计算可视区域的起始索引和结束索引；3. 渲染对应索引的列表项；4. 设置占位元素保证滚动条正常显示。为提升性能，可采取以下措施：5. 减少dom操作，复用dom元素；6. 使用requestanimationframe优化ui更新。当列表项高度不一致时，需维护一个高度数组，并通过遍历该数组累加高度来确定起始和结束索引。虚拟列表不适用于列表项数量少、高度频繁变化或需要快速滚动的场景。为避免白屏或闪烁，可采用预渲染、css transform、图片懒加载及双缓冲技术等手段。上述方法共同保障了虚拟列表在复杂场景下的流畅表现。
虚拟列表渲染，简单来说，就是只渲染可视区域内的列表项，而不是一次性渲染整个列表。这样可以大幅提升长列表的性能，避免页面卡顿。
解决方案
核心思路是：监听滚动事件，计算可视区域的起始索引和结束索引，然后只渲染这些索引对应的列表项。
计算可视区域高度： 获取列表容器的高度，例如
containerHeight = container.offsetHeight;计算列表项高度： 假设每个列表项高度一致，获取一个列表项的高度，例如
itemHeight = listItem.offsetHeight;如果列表项高度不一致，需要维护一个高度数组，记录每个列表项的高度。-
计算可视区域内的起始索引和结束索引： 根据滚动条位置和列表项高度，计算出可视区域内的起始索引
startIndex和结束索引endIndex。 公式如下：startIndex = Math.floor(scrollTop / itemHeight); endIndex = Math.min(listData.length - 1, startIndex + Math.ceil(containerHeight / itemHeight));
渲染可视区域内的列表项： 只渲染
startIndex到endIndex之间的列表项。处理滚动条位置： 为了让滚动条正常显示，需要设置列表容器的总高度。 总高度 = 列表项数量 * 列表项高度。 可以通过设置一个空的占位元素的高度来实现。
JS虚拟列表性能优化的6个要点
减少DOM操作： 这是最关键的优化点。 尽量复用DOM元素，避免频繁创建和销毁DOM节点。 可以维护一个DOM池，从DOM池中获取可用的DOM元素，渲染完成后再放回DOM池。
使用requestAnimationFrame： 将更新UI的操作放在
requestAnimationFrame中执行，可以避免阻塞主线程，提高页面流畅度。节流或防抖滚动事件： 滚动事件触发频率很高，如果每次触发都重新计算和渲染，会造成性能问题。 可以使用节流或防抖来降低滚动事件的触发频率。
使用Intersection Observer API：
Intersection Observer API可以更精确地监听元素是否进入可视区域，避免不必要的计算和渲染。 相比于监听滚动事件，Intersection Observer API的性能更好。优化数据结构： 如果列表数据量很大，可以考虑使用分块加载或懒加载的方式，减少初始加载的数据量。 同时，选择合适的数据结构，例如使用Map代替Array，可以提高查找效率。
使用Web Worker： 将复杂的计算任务放在Web Worker中执行，可以避免阻塞主线程，提高页面响应速度。 例如，计算可视区域内的起始索引和结束索引，可以在Web Worker中执行。
如何处理列表项高度不一致的情况？
如果列表项高度不一致，就不能简单地使用 itemHeight 来计算起始索引和结束索引了。 需要维护一个高度数组，记录每个列表项的高度。 计算起始索引和结束索引时，需要遍历高度数组，累加高度，直到累加的高度超过滚动条位置。
具体步骤如下：
- 维护高度数组： 在初始化时，或者在列表项渲染完成后，获取每个列表项的高度，并将其存储到高度数组中。
- 计算起始索引： 遍历高度数组，累加高度，直到累加的高度超过滚动条位置。 当前索引就是起始索引。
- 计算结束索引： 从起始索引开始，继续遍历高度数组，累加高度，直到累加的高度超过滚动条位置加上可视区域高度。 当前索引就是结束索引。
虚拟列表在哪些场景下不适用？
虽然虚拟列表可以大幅提升长列表的性能，但并非所有场景都适用。
- 列表项数量很少： 如果列表项数量很少，虚拟列表的优势不明显，甚至可能带来额外的性能开销。
- 列表项高度动态变化且频繁： 如果列表项高度动态变化且非常频繁，维护高度数组的成本会很高，可能会影响性能。
- 需要支持快速滚动： 如果需要支持快速滚动，虚拟列表可能会出现白屏或闪烁的情况。 需要进行额外的优化，例如预渲染一部分列表项。
如何避免虚拟列表渲染时的白屏或闪烁问题？
白屏或闪烁问题通常是由于渲染速度跟不上滚动速度造成的。 可以采取以下措施来缓解这个问题：
- 预渲染： 在可视区域之外，预渲染一部分列表项。 这样可以在滚动时快速显示内容，避免白屏或闪烁。
- 使用CSS transform： 使用CSS transform 来移动列表项，而不是直接修改DOM元素的top或left属性。 CSS transform 的性能更好。
- 优化图片加载： 如果列表项包含图片，可以使用懒加载或预加载的方式来优化图片加载。 避免一次性加载所有图片，造成页面卡顿。
- 使用双缓冲技术： 使用两个缓冲区，一个用于显示，一个用于渲染。 在渲染完成后，将两个缓冲区进行交换。 这样可以避免渲染过程中出现白屏或闪烁。
