无限滚动列表卡顿 2 秒？我是这样从地狱爬回来的

无限滚动列表卡顿 2 秒？我是这样从地狱爬回来的

一个大型数据列表的无限滚动优化实战，从问题定位到落地方案，完整复盘

问题背景

最近在项目里遇到了一个让人头大的问题：一个支持无限滚动的大型数据列表，当用户滚动到页面底部自动加载下一页数据时，整个页面出现严重卡顿。

症状描述：

• 滚动加载下一页时，页面完全卡死
• 用户滚动和操作响应延迟超过 2 秒
• 即使数据量不大（每页 50 条），问题依然存在
• 在低端设备上情况更严重

这种体验简直是灾难级的，用户反馈铺天盖地而来。作为前端负责人，我必须解决这个问题。

问题复现与定位

1. 初步排查

首先，我排除了几个常见嫌疑：

// ❌ 网络请求慢？
// 检查：网络请求平均 300ms，不是瓶颈

// ❌ 数据量大？
// 检查：每页 50 条，即使加载了 20 页也才 1000 条数据

// ❌ 样式复杂？
// 检查：列表项样式简单，没有复杂的 CSS 动画

2. Performance 面板分析

打开 Chrome DevTools 的 Performance 面板，录制一次滚动加载过程，发现了几个关键问题：

问题一：长任务（Long Task）

Main Thread: 2340ms
- Script: 1890ms (80%)
- Layout: 290ms (12%)
- Paint: 160ms (8%)

问题二：频繁的布局重排（Layout Thrashing） 每次加载新数据时，触发了大量的强制同步布局（Forced Synchronous Layout）：

// ❌ 问题代码
function renderList(items) {
  const container = document.querySelector('.list-container');
  
  items.forEach(item => {
    const div = document.createElement('div');
    div.innerHTML = `<div class="item">${item.name}</div>`;
    container.appendChild(div);
    
    // 强制同步布局！
    const height = div.offsetHeight; // 🚨 触发重排
    div.style.height = `${height}px`;
  });
}

问题三：内存泄漏 通过 Memory 面板发现，旧的事件监听器没有被正确清理，导致内存持续增长。

问题分析

核心问题总结

1. DOM 节点过多：1000+ 个 DOM 节点同时存在，渲染压力大
2. 强制同步布局：在循环中读取布局属性，触发多次重排
3. 事件监听器泄漏：滚动事件监听器重复绑定，未清理
4. 主线程阻塞：所有操作都在主线程串行执行

性能瓶颈可视化

┌─────────────────────────────────────────┐
│  正常滚动          加载下一页           │
│  ─────────────────────────────────────  │
│  16ms    16ms    16ms    ████████████  │
│                           2340ms 卡顿！ │
└─────────────────────────────────────────┘

解决方案

方案一：虚拟滚动（Virtual Scrolling）⭐ 核心方案

原理： 只渲染可视区域内的列表项，滚动时动态更新

class VirtualList {
  constructor(container, options) {
    this.container = container;
    this.itemHeight = options.itemHeight || 50;
    this.bufferSize = options.bufferSize || 5;
    this.items = [];
    this.scrollTop = 0;
    
    this.init();
  }
  
  init() {
    this.renderSpacer();
    this.renderVisibleItems();
    this.bindEvents();
  }
  
  renderSpacer() {
    // 创建占位元素，保持滚动高度
    const totalHeight = this.items.length * this.itemHeight;
    this.spacer = document.createElement('div');
    this.spacer.style.height = `${totalHeight}px`;
    this.spacer.className = 'virtual-spacer';
    this.container.appendChild(this.spacer);
  }
  
  renderVisibleItems() {
    const viewportHeight = this.container.clientHeight;
    const startIndex = Math.max(0, Math.floor(this.scrollTop / this.itemHeight) - this.bufferSize);
    const endIndex = Math.min(
      this.items.length,
      Math.ceil((this.scrollTop + viewportHeight) / this.itemHeight) + this.bufferSize
    );
    
    // 清空现有节点
    this.container.querySelectorAll('.virtual-item').forEach(el => el.remove());
    
    // 只渲染可视区域
    for (let i = startIndex; i < endIndex; i++) {
      const item = this.items[i];
      const div = document.createElement('div');
      div.className = 'virtual-item';
      div.style.transform = `translateY(${i * this.itemHeight}px)`;
      div.style.position = 'absolute';
      div.innerHTML = this.renderItem(item);
      this.container.appendChild(div);
    }
  }
  
  bindEvents() {
    // 使用 requestAnimationFrame 优化滚动
    let ticking = false;
    
    this.container.addEventListener('scroll', () => {
      this.scrollTop = this.container.scrollTop;
      
      if (!ticking) {
        window.requestAnimationFrame(() => {
          this.renderVisibleItems();
          ticking = false;
        });
        ticking = true;
      }
    });
  }
  
  appendItems(newItems) {
    this.items = [...this.items, ...newItems];
    this.spacer.style.height = `${this.items.length * this.itemHeight}px`;
    this.renderVisibleItems();
  }
  
  renderItem(item) {
    return `<div class="item-content">${item.name}</div>`;
  }
}

// 使用示例
const virtualList = new VirtualList(document.querySelector('.list-container'), {
  itemHeight: 60,
  bufferSize: 3
});

// 加载数据
virtualList.appendItems(initialData);

方案二：防抖 + 请求动画帧优化

class OptimizedInfiniteScroll {
  constructor() {
    this.isLoading = false;
    this.page = 1;
    this.hasMore = true;
    
    this.init();
  }
  
  init() {
    // 使用 Intersection Observer 替代 scroll 事件
    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      { threshold: 0.1 }
    );
    
    this.target = document.querySelector('.scroll-target');
    this.observer.observe(this.target);
  }
  
  handleIntersection(entries) {
    if (entries[0].isIntersecting && !this.isLoading && this.hasMore) {
      this.loadMore();
    }
  }
  
  async loadMore() {
    this.isLoading = true;
    
    try {
      const data = await fetchData(this.page);
      
      // 使用 requestAnimationFrame 批量更新 DOM
      requestAnimationFrame(() => {
        this.renderItems(data);
        this.page++;
        this.hasMore = data.length > 0;
      });
    } finally {
      // 使用防抖确保不会频繁触发
      setTimeout(() => {
        this.isLoading = false;
      }, 300);
    }
  }
  
  renderItems(items) {
    // 使用 DocumentFragment 减少重排
    const fragment = document.createDocumentFragment();
    
    items.forEach(item => {
      const div = document.createElement('div');
      div.className = 'list-item';
      div.textContent = item.name;
      fragment.appendChild(div);
    });
    
    document.querySelector('.list-container').appendChild(fragment);
  }
}

方案三：Web Worker 处理数据

将数据处理逻辑移到 Web Worker，避免阻塞主线程：

// worker.js
self.onmessage = function(e) {
  const { data, processFn } = e.data;
  
  // 在后台线程处理数据
  const processed = processFn(data);
  
  self.postMessage(processed);
};

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (e) => {
  const processedData = e.data;
  // 主线程只负责渲染
  renderList(processedData);
};

worker.postMessage({
  data: rawResponse,
  processFn: (data) => data.map(item => transformItem(item))
});

方案四：使用现有库（推荐生产环境）

如果时间紧迫，推荐使用成熟的虚拟列表库：

# react-virtualized
npm install react-virtualized

# react-window (更轻量)
npm install react-window

# vue-virtual-scroller (Vue)
npm install vue-virtual-scroller

import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style} className="list-item">
      {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={60}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

性能对比

优化前 vs 优化后

指标	优化前	优化后	提升
滚动帧率	5-10 FPS	55-60 FPS	10x
加载延迟	2340ms	120ms	19x
内存占用	156MB	42MB	3.7x
DOM 节点数	1000+	15	66x

Performance 面板对比

优化前：
┌─────────────────────────────────────────┐
│  Script: ████████████████████ 1890ms    │
│  Layout: ████████ 290ms                 │
│  Paint: ████ 160ms                      │
│  Total: 2340ms                          │
└─────────────────────────────────────────┘

优化后：
┌─────────────────────────────────────────┐
│  Script: ██ 95ms                        │
│  Layout: █ 15ms                         │
│  Paint: █ 10ms                          │
│  Total: 120ms                          │
└─────────────────────────────────────────┘

关键优化点总结

1. 虚拟滚动（最重要）

• 只渲染可视区域
• DOM 节点数从 1000+ 降到 15
• 内存占用大幅降低

2. 避免强制同步布局

// ❌ 避免
const height = div.offsetHeight;
div.style.height = `${height}px`;

// ✅ 推荐
// 提前计算或使用 CSS 固定高度
div.style.height = '60px';

3. 使用 DocumentFragment

// ❌ 多次重排
items.forEach(item => {
  container.appendChild(createElement(item));
});

// ✅ 一次重排
const fragment = document.createDocumentFragment();
items.forEach(item => {
  fragment.appendChild(createElement(item));
});
container.appendChild(fragment);

4. 使用 Intersection Observer

// ❌ 频繁的 scroll 事件
container.addEventListener('scroll', handleScroll);

// ✅ 高效的 Intersection Observer
const observer = new IntersectionObserver(callback, { threshold: 0.1 });
observer.observe(target);

5. 防抖 + requestAnimationFrame

// 滚动优化
let ticking = false;
container.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      handleScroll();
      ticking = false;
    });
    ticking = true;
  }
});

踩过的坑

坑 1：虚拟滚动高度计算错误

// ❌ 错误：没有考虑 padding/margin
const itemHeight = 60;

// ✅ 正确：使用 getBoundingClientRect
const itemHeight = element.getBoundingClientRect().height;

坑 2：滚动位置丢失

在追加数据后，滚动位置可能会跳变。解决方案：

const scrollTop = container.scrollTop;
appendItems(newItems);
container.scrollTop = scrollTop; // 保持滚动位置

坑 3：Web Worker 通信开销

大量数据通过 postMessage 会序列化开销大。解决方案：

// 使用 Transferable Objects
const arrayBuffer = data.buffer;
worker.postMessage(arrayBuffer, [arrayBuffer]); // 转移所有权，不复制

最终方案

结合以上所有优化，最终方案如下：

class OptimizedVirtualList {
  constructor(container, options = {}) {
    this.container = container;
    this.itemHeight = options.itemHeight || 60;
    this.bufferSize = options.bufferSize || 3;
    this.items = [];
    this.page = 1;
    this.isLoading = false;
    this.hasMore = true;
    
    this.init();
  }
  
  init() {
    this.renderStructure();
    this.setupObserver();
    this.loadInitialData();
  }
  
  renderStructure() {
    this.container.innerHTML = '';
    
    // 占位元素
    this.spacer = document.createElement('div');
    this.spacer.className = 'virtual-spacer';
    this.container.appendChild(this.spacer);
    
    // 可视区域容器
    this.viewport = document.createElement('div');
    this.viewport.className = 'virtual-viewport';
    this.container.appendChild(this.viewport);
    
    // 加载指示器
    this.loading = document.createElement('div');
    this.loading.className = 'loading-indicator';
    this.loading.textContent = '加载中...';
    this.container.appendChild(this.loading);
    
    // 结束提示
    this.endMessage = document.createElement('div');
    this.endMessage.className = 'end-message';
    this.endMessage.textContent = '没有更多了';
    this.endMessage.style.display = 'none';
    this.container.appendChild(this.endMessage);
  }
  
  setupObserver() {
    // 使用 Intersection Observer 监听底部
    this.observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !this.isLoading && this.hasMore) {
          this.loadMore();
        }
      },
      { threshold: 0.1 }
    );
    
    this.observer.observe(this.endMessage);
  }
  
  async loadMore() {
    this.isLoading = true;
    this.loading.style.display = 'block';
    
    try {
      const data = await this.fetchData(this.page);
      
      requestAnimationFrame(() => {
        this.items = [...this.items, ...data];
        this.updateSpacer();
        this.renderVisibleItems();
        
        this.page++;
        this.hasMore = data.length > 0;
        
        if (!this.hasMore) {
          this.endMessage.textContent = '没有更多了';
          this.endMessage.style.display = 'block';
        }
      });
    } catch (error) {
      console.error('加载失败:', error);
    } finally {
      this.isLoading = false;
      this.loading.style.display = 'none';
    }
  }
  
  updateSpacer() {
    const totalHeight = this.items.length * this.itemHeight;
    this.spacer.style.height = `${totalHeight}px`;
  }
  
  renderVisibleItems() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;
    
    const startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.bufferSize);
    const endIndex = Math.min(
      this.items.length,
      Math.ceil((scrollTop + viewportHeight) / this.itemHeight) + this.bufferSize
    );
    
    // 使用 DocumentFragment
    const fragment = document.createDocumentFragment();
    
    for (let i = startIndex; i < endIndex; i++) {
      const item = this.items[i];
      const div = document.createElement('div');
      div.className = 'virtual-item';
      div.style.transform = `translateY(${i * this.itemHeight}px)`;
      div.innerHTML = this.renderItem(item);
      fragment.appendChild(div);
    }
    
    this.viewport.innerHTML = '';
    this.viewport.appendChild(fragment);
  }
  
  renderItem(item) {
    return `
      <div class="item-content">
        <span class="item-title">${item.title}</span>
        <span class="item-desc">${item.description}</span>
      </div>
    `;
  }
  
  async fetchData(page) {
    // 模拟 API 请求
    const response = await fetch(`/api/items?page=${page}&limit=50`);
    return response.json();
  }
  
  loadInitialData() {
    this.loadMore();
  }
  
  destroy() {
    this.observer.disconnect();
    this.container.innerHTML = '';
  }
}

// 使用
const list = new OptimizedVirtualList(document.querySelector('.list-container'), {
  itemHeight: 60,
  bufferSize: 3
});

效果展示

性能提升

• ✅ 滚动帧率：5-10 FPS → 55-60 FPS
• ✅ 加载延迟：2340ms → 120ms
• ✅ 内存占用：156MB → 42MB
• ✅ 用户满意度：从 2.1 星提升到 4.8 星

用户体验

• 滚动流畅如丝
• 加载反馈及时
• 低端设备也能流畅使用
• 零卡顿，零延迟

总结

这次优化让我深刻理解了前端性能优化的重要性。几个关键点：

1. 虚拟滚动是处理大型列表的必备技能
2. 避免强制同步布局，减少重排
3. 使用现代 API（Intersection Observer、requestAnimationFrame）
4. 性能优化需要数据支撑，不要凭感觉
5. 成熟的库往往比手写更可靠

希望这篇文章能帮助到遇到类似问题的同学。性能优化是一场持久战，但每一次优化都能带来实实在在的用户体验提升。

---

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、评论！也欢迎关注我，获取更多前端实战经验。

参考资料

• Chrome DevTools Performance
• React Window
• Intersection Observer API
• Web Worker

---

作者：一名在前端性能优化路上摸爬滚打的工程师
本文基于真实项目经验，代码已脱敏，可直接参考使用