JS怎么实现前端长列表优化 5种虚拟滚动方案提升万级列表性能

星雪酱_8098

发布时间：2025-06-24 11:10:02

458人浏览过

来源于php中文网

原创

前端长列表优化的核心是虚拟滚动，通过只渲染可视区域内的列表项提升性能。1. 固定高度虚拟滚动：适用于列表项高度一致的场景，通过计算滚动位置确定可视区域索引并渲染；2. 动态高度虚拟滚动：记录每个项的实际高度，适应高度不一致的情况；3. intersection observer 虚拟滚动：利用 api 精确监听元素是否进入可视区域，减少无效渲染；4. react 虚拟滚动组件：如 react-window，支持固定和动态高度，使用便捷；5. vue 虚拟滚动组件：如 vue-virtual-scroller，适用于 vue 项目。选择方案时需考虑高度是否固定及技术栈，同时注意优化渲染复杂度、资源加载与数据缓存以进一步提升性能。

JS怎么实现前端长列表优化 5种虚拟滚动方案提升万级列表性能

前端长列表优化，核心在于避免一次性渲染大量DOM节点导致页面卡顿。虚拟滚动是关键，只渲染可视区域内的列表项，大幅提升性能。

解决方案

虚拟滚动通过监听滚动事件，动态计算可视区域内的列表项，并更新DOM。本质上，它是“按需渲染”，只渲染用户实际看到的部分。下面提供5种虚拟滚动方案，帮你搞定万级列表：

固定高度虚拟滚动： 这是最简单的方案。假设每个列表项高度固定，通过滚动条位置计算出可视区域起始和结束的索引，然后只渲染这部分数据。

立即学习“前端免费学习笔记（深入）”；

const list = document.getElementById('list');
const itemHeight = 50; // 每个列表项高度
const visibleCount = 20; // 可视区域显示多少个
const totalHeight = data.length * itemHeight; // 列表总高度

list.style.height = totalHeight + 'px'; // 设置容器高度，撑开滚动条

function renderList(startIndex, endIndex) {
  // 清空现有列表
  list.innerHTML = '';
  for (let i = startIndex; i <= endIndex; i++) {
    const item = document.createElement('div');
    item.style.height = itemHeight + 'px';
    item.textContent = data[i];
    list.appendChild(item);
  }
}

list.addEventListener('scroll', () => {
  const scrollTop = list.scrollTop;
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(startIndex + visibleCount - 1, data.length - 1);
  renderList(startIndex, endIndex);
});

// 初始渲染
renderList(0, visibleCount - 1);

这种方案简单直接，但要求列表项高度一致。如果高度不一致，会导致计算错误，体验很差。

动态高度虚拟滚动： 解决固定高度的局限性。需要记录每个列表项的实际高度，并在滚动时动态计算可视区域。可以使用 getBoundingClientRect() 获取元素高度。

const list = document.getElementById('list');
const itemHeights = []; // 存储每个列表项高度
let totalHeight = 0;

function renderList(startIndex, endIndex) {
  list.innerHTML = '';
  for (let i = startIndex; i <= endIndex; i++) {
    const item = document.createElement('div');
    item.textContent = data[i];
    list.appendChild(item);

    // 获取高度并存储
    item.onload = () => { // 确保内容加载完毕后获取高度
      const height = item.getBoundingClientRect().height;
      itemHeights[i] = height;
      totalHeight += height; // 动态计算总高度
      list.style.height = totalHeight + 'px';
    };
  }
}

list.addEventListener('scroll', () => {
  const scrollTop = list.scrollTop;
  let startIndex = 0;
  let currentHeight = 0;

  // 计算起始索引
  for (let i = 0; i < data.length; i++) {
    currentHeight += itemHeights[i] || 50; // 默认高度，防止初始计算出错
    if (currentHeight >= scrollTop) {
      startIndex = i;
      break;
    }
  }

  let endIndex = startIndex;
  currentHeight = 0;
  // 计算结束索引
  for (let i = startIndex; i < data.length; i++) {
    currentHeight += itemHeights[i] || 50;
    if (currentHeight >= scrollTop + list.clientHeight) {
      endIndex = i;
      break;
    }
  }

  renderList(startIndex, endIndex);
});

// 初始渲染
renderList(0, Math.min(20, data.length - 1));

动态高度的实现复杂一些，需要维护每个列表项的高度信息，但能适应更复杂的场景。

Intersection Observer 虚拟滚动： 利用 IntersectionObserver API 监听元素是否进入可视区域。这种方式可以更精确地判断元素是否可见，减少不必要的渲染。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

const list = document.getElementById('list');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入可视区域，进行渲染或加载数据
      const index = entry.target.dataset.index;
      entry.target.textContent = data[index];
      observer.unobserve(entry.target); // 停止监听，避免重复渲染
    }
  });
});

for (let i = 0; i < data.length; i++) {
  const item = document.createElement('div');
  item.dataset.index = i;
  item.style.height = '50px'; // 占位高度
  list.appendChild(item);
  observer.observe(item); // 开始监听
}

IntersectionObserver 的优点是性能更好，可以异步监听，不会阻塞主线程。

React 虚拟滚动组件： 如果你使用 React，有很多现成的虚拟滚动组件可以使用，比如 react-window、react-virtualized。这些组件封装了虚拟滚动的逻辑，使用起来非常方便。

import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    Row {index}
  </div>
);

const MyListComponent = () => (
  <FixedSizeList
    height={600}
    itemCount={10000}
    itemSize={50}
    width={800}
  >
    {Row}
  </FixedSizeList>
);

react-window 性能很好，支持固定高度和动态高度的列表。

Vue 虚拟滚动组件： Vue 也有类似的组件，比如 vue-virtual-scroller。用法和 React 组件类似，可以轻松实现虚拟滚动。

<template>
  <recycle-scroller
    class="list"
    :items="listData"
    :item-size="50"
  >
    <template v-slot="{ item }">
      <div>{{ item }}</div>
    </template>
  </recycle-scroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      listData: Array.from({ length: 10000 }, (_, i) => `Item ${i}`)
    }
  }
}
</script>

选择合适的虚拟滚动方案，取决于你的项目需求和技术栈。