JavaScript无限滚动优化技巧分享

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

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