虚拟滚动通过只渲染可视区域内容来提升性能，其核心是计算可视范围并动态渲染；实现步骤为：1. 监听滚动事件获取滚动位置；2. 根据滚动位置和项高度计算应显示的数据索引范围；3. 仅渲染该范围内的数据；4. 设置容器高度以保持滚动条正确；5. 使用 transform: translatey 或绝对定位将内容定位到正确位置；性能提升原因在于大幅减少dom操作；优化方式包括：使用 requestanimationframe 减少重绘、避免复杂css、缓存已渲染项、利用 intersection observer 精准监听可见性；常见问题有：列表项高度不一时需预存高度、快速滚动可能导致跳跃、需自定义滚动条样式以维持体验；示例代码展示了基于固定高度的简化实现，通过绝对定位和 scroll 事件动态更新渲染内容，确保长列表高效滚动。
虚拟滚动，简单来说，就是只渲染用户可见区域的内容，而不是一次性渲染整个列表。 这样做的好处是显著提升长列表的渲染性能，尤其是在移动端，效果更为明显。
虚拟滚动的核心在于计算可视区域内应该渲染哪些数据，以及如何定位这些数据在整个列表中的位置。
实现方案：
- 计算可视区域的数据范围： 监听滚动事件，获取滚动位置。根据滚动位置和列表项的高度，计算出当前可视区域应该显示的数据索引范围。
- 渲染可视区域的数据： 只渲染计算出的数据索引范围内的数据。
- 调整滚动容器的高度： 设置滚动容器的高度，使其能够容纳整个列表的内容，即使只渲染了部分数据，也能保证滚动条的正确显示。
-
使用 transform: translateY 定位： 根据当前可视区域的起始索引，计算出偏移量，并使用
transform: translateY
将可视区域的内容定位到正确的位置。
为什么虚拟滚动能提升性能？
传统滚动会一次性渲染所有列表项，当列表项数量巨大时，会造成大量的 DOM 操作，导致页面卡顿。虚拟滚动只渲染可视区域内的列表项，大大减少了 DOM 操作的数量，从而提升了渲染性能。想象一下，你有一本1000页的书，传统方式是直接把所有页都摊开，而虚拟滚动则是只打开你正在阅读的那几页。
如何优化虚拟滚动的性能？
-
使用 requestAnimationFrame： 在滚动事件处理函数中使用
requestAnimationFrame
，可以避免频繁的 DOM 操作，提高渲染效率。 - 避免复杂的 CSS 样式： 复杂的 CSS 样式会增加浏览器的渲染负担，尽量使用简单的 CSS 样式。
- 使用缓存： 缓存已经渲染过的列表项，避免重复渲染。
- 使用 Intersection Observer API： 可以使用 Intersection Observer API 来监听元素是否进入可视区域，从而更精确地控制渲染。
虚拟滚动有哪些常见的坑？
- 列表项高度不固定： 如果列表项的高度不固定，需要动态计算每个列表项的高度，这会增加计算的复杂度。一种解决方案是预先计算每个列表项的高度，并将其存储起来。
-
滚动跳跃： 在快速滚动时，可能会出现滚动跳跃的现象。这通常是由于计算不精确或者渲染不及时造成的。可以尝试调整计算参数或者使用
requestAnimationFrame
来优化渲染。 - 滚动条样式： 虚拟滚动会改变滚动条的行为，需要自定义滚动条样式，以保证用户体验。
// 示例代码 (简化版)
const list = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const container = document.getElementById('container');
const itemHeight = 30; // 假设每个 item 高度 30px
const visibleCount = Math.ceil(container.clientHeight / itemHeight); // 计算可视区域能容纳多少个 item
const totalHeight = list.length * itemHeight;
container.style.height = `${totalHeight}px`; // 撑开容器
function render(start) {
const fragment = document.createDocumentFragment();
for (let i = start; i < start + visibleCount; i++) {
if (i >= list.length) break;
const item = document.createElement('div');
item.textContent = list[i];
item.style.height = `${itemHeight}px`;
item.style.lineHeight = `${itemHeight}px`;
item.style.position = 'absolute';
item.style.top = `${i * itemHeight}px`; // 直接定位
fragment.appendChild(item);
}
container.innerHTML = ''; // 清空
container.appendChild(fragment);
}
container.addEventListener('scroll', () => {
const scrollTop = container.scrollTop;
const start = Math.floor(scrollTop / itemHeight);
requestAnimationFrame(() => render(start));
});
render(0); // 初始渲染这段代码简化了定位的实现，直接用
position: absolute和
top来定位，更接近实际项目中的做法。 同时，移除了不必要的变量，让代码更简洁。
