前端长列表优化的核心是虚拟滚动，通过只渲染可视区域内的列表项提升性能。1. 固定高度虚拟滚动：适用于列表项高度一致的场景，通过计算滚动位置确定可视区域索引并渲染；2. 动态高度虚拟滚动：记录每个项的实际高度，适应高度不一致的情况；3. intersection observer 虚拟滚动：利用 api 精确监听元素是否进入可视区域，减少无效渲染；4. react 虚拟滚动组件：如 react-window，支持固定和动态高度，使用便捷；5. vue 虚拟滚动组件：如 vue-virtual-scroller，适用于 vue 项目。选择方案时需考虑高度是否固定及技术栈，同时注意优化渲染复杂度、资源加载与数据缓存以进一步提升性能。
前端长列表优化，核心在于避免一次性渲染大量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 监听元素是否进入可视区域。 这种方式可以更精确地判断元素是否可见，减少不必要的渲染。
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); // 开始监听 } -
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>选择合适的虚拟滚动方案，取决于你的项目需求和技术栈。
如何选择合适的虚拟滚动方案？
选择哪种方案，主要看列表项的高度是否固定，以及你使用的前端框架。如果高度固定，第一种方案最简单。如果高度不固定，需要考虑动态高度的方案或者使用现成的组件。
虚拟滚动性能瓶颈在哪里？
即使使用了虚拟滚动，如果列表项的渲染逻辑过于复杂，仍然可能出现性能问题。比如，列表项包含大量的图片或者复杂的计算。这时候需要优化列表项的渲染逻辑，比如使用图片懒加载、减少计算量。
除了虚拟滚动，还有其他优化方案吗？
除了虚拟滚动，还可以考虑以下优化方案：
- 分页加载： 将长列表分成多个页面，每次只加载一页数据。
- 懒加载： 对于图片等资源，只在需要显示的时候才加载。
- 数据缓存： 将已经加载的数据缓存起来，避免重复加载。
- 骨架屏： 在数据加载完成之前，显示一个骨架屏，提升用户体验。
选择合适的优化方案，需要根据具体的场景进行分析。
