虛擬列表（Virtual List）技術是一種優(yōu)化長列表渲染性能的技術，特別適用于處理大量數據的場景。其主要原理是通過“虛擬化”列表內容，只渲染用戶視口（可視區(qū)域）內的元素，而不是渲染整個列表。這樣可以顯著減少 DOM 元素的數量，提高頁面性能和響應速度。
虛擬列表的原理
視口范圍渲染：
僅渲染可視區(qū)域：虛擬列表只渲染當前用戶視口內的列表項，即用戶能夠看到的部分。這減少了 DOM 元素的數量，避免了性能瓶頸。
動態(tài)加載：當用戶滾動時，虛擬列表動態(tài)地卸載視口外的元素，并加載新的視口內的元素，保持 DOM 的高效性。
占位元素：
占位空間：為了保持列表的滾動位置和正確的布局，虛擬列表會使用占位元素（虛擬的空白元素）來表示未渲染部分的高度或寬度。這樣可以確保滾動條的高度與實際內容長度一致。
滾動計算：通過計算已渲染項的總高度和占位元素的高度，虛擬列表可以模擬整個列表的實際高度，提供正確的滾動行為。
元素復用：
重用組件：在虛擬列表中，通常會重用相同的組件實例來渲染不同的數據項，從而減少 DOM 操作的開銷。
虛擬化列表項：僅創(chuàng)建當前視口所需的 DOM 元素實例，避免創(chuàng)建過多的無用 DOM 節(jié)點。
實現(xiàn)虛擬列表的步驟
計算視口高度和滾動位置：
計算當前視口的高度，以及滾動條的位置，以確定哪些數據項需要渲染。
創(chuàng)建占位元素：
根據總數據量和單個數據項的高度，創(chuàng)建占位元素來模擬整個列表的高度，使?jié)L動條顯示正確的長度。
渲染可視區(qū)域元素：
根據當前滾動位置計算需要渲染的數據項，并在 DOM 中插入這些元素。
處理滾動事件：
監(jiān)聽滾動事件，動態(tài)計算需要渲染的內容和更新視口內的元素。當用戶滾動時，調整可視區(qū)域內的元素，并更新占位元素。
優(yōu)化性能：
節(jié)流/防抖：在處理滾動事件時，使用節(jié)流（throttling）或防抖（debouncing）技術來減少處理頻率，避免性能問題。
異步渲染：將渲染操作拆分成異步任務，避免阻塞主線程。
例子與應用
前端框架中的虛擬列表實現(xiàn)
React Virtualized、React Window：這兩個庫用于在 React 中實現(xiàn)虛擬列表，提供了簡單易用的 API 來管理虛擬化列表的渲染。
Vue Virtual Scroll List：為 Vue 提供虛擬滾動功能，優(yōu)化長列表的渲染性能。
實現(xiàn)示例（原生 JavaScript）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#container {
height: 400px; /* 視口高度 */
overflow-y: auto; /* 啟用滾動 */
position: relative;
}
#content {
position: absolute; width: 100%;
}
.item {
height: 50px; /* 每個項的高度 */
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<script>
const container = document.getElementById('container');
const content = document.getElementById('content');
const itemHeight = 50; // 每個項的高度
const itemCount = 1000; // 數據項總數
const viewportHeight = container.clientHeight; // 視口高度
// 計算總高度
const totalHeight = itemCount * itemHeight;
content.style.height = `${totalHeight}px`;
// 渲染項
function renderItems() {
const scrollTop = container.scrollTop;
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(itemCount - 1, Math.ceil((scrollTop + viewportHeight) / itemHeight));
let html = '';
for (let i = startIndex; i <= endIndex; i++) {
html += `<div>Item ${i}</div>`;
}
content.innerHTML = html;
}
container.addEventListener('scroll', () => {
renderItems();
});
// 初始渲染
renderItems();
</script>
</body>
</html>
實現(xiàn)示例（React）
在 React 中，可以使用現(xiàn)成的庫如 React Window 或 React Virtualized 實現(xiàn)虛擬列表，或者自己實現(xiàn)：
import React, { useState, useEffect, useRef } from 'react';
const VirtualList = ({ itemCount, itemHeight }) => {
const [visibleItems, setVisibleItems] = useState([]);
const containerRef = useRef(null);
useEffect(() => {
const handleScroll = () => {
const container = containerRef.current;
const scrollTop = container.scrollTop;
const viewportHeight = container.clientHeight;
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(itemCount - 1, Math.ceil((scrollTop + viewportHeight) / itemHeight));
const items = [];
for (let i = startIndex; i <= endIndex; i++) {
items.push(i);
}
setVisibleItems(items);
};
containerRef.current.addEventListener('scroll', handleScroll);
handleScroll(); // Initial render
return () => {
containerRef.current.removeEventListener('scroll', handleScroll); };
}, [itemCount, itemHeight]);
const totalHeight = itemCount * itemHeight;
return (
<div ref={containerRef} style={{ height: '400px', overflowY: 'auto', position: 'relative' }}>
<div style={{ height: `${totalHeight}px`, position: 'relative' }}>
{visibleItems.map(item => (
<div key={item} style={{ height: `${itemHeight}px`, borderBottom: '1px solid #ddd' }}>
Item {item}
</div>
))}
</div>
</div>
);
};
export default VirtualList;
場景應用
長數據列表：適用于需要顯示大量條目的場景，例如電子郵件列表、評論列表、數據表格等
無限滾動：與虛擬列表技術結合，支持無限滾動加載數據，提升用戶體驗
總結
虛擬列表技術通過僅渲染視口內的內容、使用占位元素模擬總高度、動態(tài)加載和卸載元素來優(yōu)化性能。它特別適用于處理大量數據的場景，可以顯著提高渲染效率和用戶體驗。在現(xiàn)代前端框架中，許多庫和工具都提供了虛擬列表的實現(xiàn)，幫助開發(fā)者輕松集成這一技術
來源：https://juejin.cn/post/7399851256225873929 作者：一曲高山流水
該文章在 2024/8/6 15:08:36 編輯過
400 186 1886
