大量條目和無限滾動(dòng)場(chǎng)景中用到的虛擬列表技術(shù)是什么原理？

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

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

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

虛擬列表的原理

視口范圍渲染：

僅渲染可視區(qū)域：虛擬列表只渲染當(dāng)前用戶視口內(nèi)的列表項(xiàng)，即用戶能夠看到的部分。這減少了 DOM 元素的數(shù)量，避免了性能瓶頸。

動(dòng)態(tài)加載：當(dāng)用戶滾動(dòng)時(shí)，虛擬列表動(dòng)態(tài)地卸載視口外的元素，并加載新的視口內(nèi)的元素，保持 DOM 的高效性。

占位元素：

占位空間：為了保持列表的滾動(dòng)位置和正確的布局，虛擬列表會(huì)使用占位元素（虛擬的空白元素）來表示未渲染部分的高度或?qū)挾取＿@樣可以確保滾動(dòng)條的高度與實(shí)際內(nèi)容長(zhǎng)度一致。

滾動(dòng)計(jì)算：通過計(jì)算已渲染項(xiàng)的總高度和占位元素的高度，虛擬列表可以模擬整個(gè)列表的實(shí)際高度，提供正確的滾動(dòng)行為。

元素復(fù)用：

重用組件：在虛擬列表中，通常會(huì)重用相同的組件實(shí)例來渲染不同的數(shù)據(jù)項(xiàng)，從而減少 DOM 操作的開銷。

虛擬化列表項(xiàng)：僅創(chuàng)建當(dāng)前視口所需的 DOM 元素實(shí)例，避免創(chuàng)建過多的無用 DOM 節(jié)點(diǎn)。

實(shí)現(xiàn)虛擬列表的步驟

計(jì)算視口高度和滾動(dòng)位置：

計(jì)算當(dāng)前視口的高度，以及滾動(dòng)條的位置，以確定哪些數(shù)據(jù)項(xiàng)需要渲染。

創(chuàng)建占位元素：

根據(jù)總數(shù)據(jù)量和單個(gè)數(shù)據(jù)項(xiàng)的高度，創(chuàng)建占位元素來模擬整個(gè)列表的高度，使?jié)L動(dòng)條顯示正確的長(zhǎng)度。

渲染可視區(qū)域元素：

根據(jù)當(dāng)前滾動(dòng)位置計(jì)算需要渲染的數(shù)據(jù)項(xiàng)，并在 DOM 中插入這些元素。

處理滾動(dòng)事件：

監(jiān)聽滾動(dòng)事件，動(dòng)態(tài)計(jì)算需要渲染的內(nèi)容和更新視口內(nèi)的元素。當(dāng)用戶滾動(dòng)時(shí)，調(diào)整可視區(qū)域內(nèi)的元素，并更新占位元素。

優(yōu)化性能：

節(jié)流/防抖：在處理滾動(dòng)事件時(shí)，使用節(jié)流（throttling）或防抖（debouncing）技術(shù)來減少處理頻率，避免性能問題。

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

例子與應(yīng)用

前端框架中的虛擬列表實(shí)現(xiàn)

React Virtualized、React Window：這兩個(gè)庫用于在 React 中實(shí)現(xiàn)虛擬列表，提供了簡(jiǎn)單易用的 API 來管理虛擬化列表的渲染。

Vue Virtual Scroll List：為 Vue 提供虛擬滾動(dòng)功能，優(yōu)化長(zhǎng)列表的渲染性能。

實(shí)現(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; /* 啟用滾動(dòng) */ 
position: relative; 
} 
#content { 
position: absolute; width: 100%;
} 
.item { 
height: 50px; /* 每個(gè)項(xiàng)的高度 */ 
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; // 每個(gè)項(xiàng)的高度 
const itemCount = 1000; // 數(shù)據(jù)項(xiàng)總數(shù) 
const viewportHeight = container.clientHeight; // 視口高度 
// 計(jì)算總高度 
const totalHeight = itemCount * itemHeight; 
content.style.height = `${totalHeight}px`; 
// 渲染項(xiàng) 
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>

實(shí)現(xiàn)示例（React）

在 React 中，可以使用現(xiàn)成的庫如 React Window 或 React Virtualized 實(shí)現(xiàn)虛擬列表，或者自己實(shí)現(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;

場(chǎng)景應(yīng)用

長(zhǎng)數(shù)據(jù)列表：適用于需要顯示大量條目的場(chǎng)景，例如電子郵件列表、評(píng)論列表、數(shù)據(jù)表格等

無限滾動(dòng)：與虛擬列表技術(shù)結(jié)合，支持無限滾動(dòng)加載數(shù)據(jù)，提升用戶體驗(yàn)

總結(jié)

虛擬列表技術(shù)通過僅渲染視口內(nèi)的內(nèi)容、使用占位元素模擬總高度、動(dòng)態(tài)加載和卸載元素來優(yōu)化性能。它特別適用于處理大量數(shù)據(jù)的場(chǎng)景，可以顯著提高渲染效率和用戶體驗(yàn)。在現(xiàn)代前端框架中，許多庫和工具都提供了虛擬列表的實(shí)現(xiàn)，幫助開發(fā)者輕松集成這一技術(shù)

來源：https://juejin.cn/post/7399851256225873929 作者：一曲高山流水

該文章在 2024/8/6 15:08:36 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。