大量條目和無限滾動場景中用到的虛擬列表技術是什么原理？

freeflydom

2024年8月6日 14:55 本文熱度 1231

虛擬列表（Virtual List）技術是一種優化長列表渲染性能的技術，特別適用于處理大量數據的場景。其主要原理是通過“虛擬化”列表內容，只渲染用戶視口（可視區域）內的元素，而不是渲染整個列表。這樣可以顯著減少 DOM 元素的數量，提高頁面性能和響應速度。

虛擬列表的原理

視口范圍渲染：

僅渲染可視區域：虛擬列表只渲染當前用戶視口內的列表項，即用戶能夠看到的部分。這減少了 DOM 元素的數量，避免了性能瓶頸。

動態加載：當用戶滾動時，虛擬列表動態地卸載視口外的元素，并加載新的視口內的元素，保持 DOM 的高效性。

占位元素：

占位空間：為了保持列表的滾動位置和正確的布局，虛擬列表會使用占位元素（虛擬的空白元素）來表示未渲染部分的高度或寬度。這樣可以確保滾動條的高度與實際內容長度一致。

滾動計算：通過計算已渲染項的總高度和占位元素的高度，虛擬列表可以模擬整個列表的實際高度，提供正確的滾動行為。

元素復用：

重用組件：在虛擬列表中，通常會重用相同的組件實例來渲染不同的數據項，從而減少 DOM 操作的開銷。

虛擬化列表項：僅創建當前視口所需的 DOM 元素實例，避免創建過多的無用 DOM 節點。

實現虛擬列表的步驟

計算視口高度和滾動位置：

計算當前視口的高度，以及滾動條的位置，以確定哪些數據項需要渲染。

創建占位元素：

根據總數據量和單個數據項的高度，創建占位元素來模擬整個列表的高度，使滾動條顯示正確的長度。

渲染可視區域元素：

根據當前滾動位置計算需要渲染的數據項，并在 DOM 中插入這些元素。

處理滾動事件：

監聽滾動事件，動態計算需要渲染的內容和更新視口內的元素。當用戶滾動時，調整可視區域內的元素，并更新占位元素。

優化性能：

節流/防抖：在處理滾動事件時，使用節流（throttling）或防抖（debouncing）技術來減少處理頻率，避免性能問題。

異步渲染：將渲染操作拆分成異步任務，避免阻塞主線程。

例子與應用

前端框架中的虛擬列表實現

React Virtualized、React Window：這兩個庫用于在 React 中實現虛擬列表，提供了簡單易用的 API 來管理虛擬化列表的渲染。

Vue Virtual Scroll List：為 Vue 提供虛擬滾動功能，優化長列表的渲染性能。

實現示例（原生 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>

實現示例（React）

在 React 中，可以使用現成的庫如 React Window 或 React Virtualized 實現虛擬列表，或者自己實現：

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;