使用JavaScript实现一个简单的无限滚动_javascript性能优化_技术教程

使用虚拟列表只渲染可见区域，结合节流控制滚动事件频率，并通过DocumentFragment和transform减少重排重绘，实现高性能无限滚动。

实现无限滚动时，如果不做性能优化，很容易导致页面卡顿、内存占用过高。关键在于减少DOM元素数量、合理使用事件监听和避免频繁重排重绘。以下是几个核心思路与代码示例。

1. 虚拟列表（只渲染可见区域）

无限滚动不等于把所有数据都渲染到页面上。使用虚拟列表技术，只渲染当前可视区域附近的元素，其余用占位空白代替。

假设每条数据高度固定为60px，可视区域最多显示10条：

const container = document.getElementById('list-container');
const itemHeight = 60;
const visibleCount = 10;
let items = Array.from({ length: 10000 }, (_, i) => Item ${i}); // 模拟大量数据
function renderVisible(startIndex) {
const fragment = document.createDocumentFragment();
const endIndex = Math.min(startIndex + visibleCount, items.length);
// 清空并重新渲染可视区域
container.innerHTML = '';
// 上方空白占位
const spacerTop = document.createElement('div');
spacerTop.style.height = ${startIndex * itemHeight}px;
fragment.appendChild(spacerTop);
// 渲染可见项
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.style.height = ${itemHeight}px;
item.textContent = items[i];
item.classList.add('list-item');
fragment.appendChild(item);
}
container.appendChild(fragment);
}
// 滚动处理
container.addEventListener('scroll', () => {
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
renderVisible(startIndex);
});
// 初始化
container.style.height = '600px';
container.style.overflowY = 'auto';
renderVisible(0);

2. 防抖与节流优化滚动事件

滚动事件触发频率极高，直接在 scroll 中执行渲染会严重卡顿。使用节流控制执行频率。

function throttle(fn, delay) {
  let inThrottle;
  return function () {
    if (!inThrottle) {
      fn.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, delay);
    }
  };
}
container.addEventListener('scroll', throttle(() => {
const startIndex = Math.floor(container.scrollTop / itemHeight);
renderVisible(startIndex);
}, 100));