十分鐘搞定前端虛擬列表

作者：CUGGZ 2023-11-30 10:21:48

虛擬列表的概念就出現了，隨后又出現了各種各樣的虛擬列表庫。通過將可視區域內和可見區域外的數據進行動態切換，虛擬列表可以極大地提升列表滾動的性能。本文就來分享一些主流的前端虛擬列表工具庫！

當處理包含大量數據的列表時，前端性能往往是一個重要的考慮點。傳統的滾動列表組件在處理大數據量時可能會非常卡頓，甚至導致頁面崩潰。那么針對這個問題，虛擬列表的概念就出現了，隨后又出現了各種各樣的虛擬列表庫。通過將可視區域內和可見區域外的數據進行動態切換，虛擬列表可以極大地提升列表滾動的性能。本文就來分享一些主流的前端虛擬列表工具庫！

Vue

vue-virtual-scroller

vue-virtual-scroller 是一個基于Vue.js的虛擬滾動列表組件，用于優化大數據量渲染時的性能。它可以在滾動時動態地加載和卸載列表項，從而減少頁面的 DOM 元素數量，提高渲染效率，同時也能夠提高用戶體驗。

vue-virtual-scroller 具有以下特點：

無限滾動：可以像普通滾動列表一樣滾動，即使數據量非常大，也不會有性能問題。
性能優秀：只渲染當前可見區域內的數據，而不是整個列表，因此能夠降低瀏覽器的負載，提高頁面渲染性能。
支持動態高度/寬度：可以根據不同的數據項設置不同的高度或寬度。
支持多種滾動方式：支持垂直和水平兩種滾動方式，同時也支持鼠標滾輪、觸控滑動等多種滾動方式。
易于使用：支持通過簡單的配置即可實現虛擬滾動列表，同時也可以自定義列表項的樣式和渲染方式。

Github（??8.7k）：https://github.com/Akryum/vue-virtual-scroller。

vue-virtual-scroll-list

vue-virtual-scroll-list 是一個支持高性能滾動的 Vue 組件，可以用于處理包含大量數據項的列表。它能夠根據當前視窗的大小，只渲染可見部分的數據項，并在滾動時動態更新列表內容，從而實現高效的渲染和滾動性能。

vue-virtual-scroll-list 具有以下特點：

高性能：只渲染用戶可見部分的數據，大大減少了渲染時間和內存占用，并提高了滾動時的渲染性能，特別是處理包含大量數據的列表時更為明顯。
大型數據支持：可以處理非常大的列表數據，在無需占用過多內存和處理器資源的同時，仍可以保證流暢的滾動體驗。
靈活定制：該庫提供了許多可配置的選項，如列表容器的高度和寬度、渲染行數、數據項組件等，使開發者可以根據自己的需求定制出更符合項目要求的虛擬滾動列表。
可擴展性：由于該庫是基于 Vue 組件封裝的，因此可以很方便地與其他 Vue 組件進行集成，適用于各種前端應用場景。
輕量級：代碼簡潔，不依賴任何第三方庫，壓縮后僅有幾 kb 的大小，易于集成和使用。

Github（??4.2k）：https://github.com/tangbc/vue-virtual-scroll-list。

vue3-infinite-list

vue3-infinite-list 是一個適用于vue的短小精悍的無限滾動加載庫，零依賴。其具有以下特性：

體積小 & 零依賴 – gzipped 后只有 3kb。
百萬級列表渲染, 不費吹灰之力。
支持滾動到指定條目或指定初始滾動偏移量。
支持固定或可變寬/高。
垂直 or 水平列表。

Github（??195）：https://github.com/tnfe/vue3-infinite-list。

React

react-virtualized

React-virtualized是一個基于React框架的用于渲染大型列表和表格的庫。它通過僅渲染可見部分的內容來提高性能，從而有效地處理大量數據。該庫提供了一組可重復使用的高級組件，如List、Table、Masonry、InfiniteLoader等，這些組件旨在減少內存使用，并且可以通過自定義樣式和布局進行配置。