JavaScript – 虛擬化列表

作用及目的

虛擬化列表的作用是優化大量數據的顯示效果和性能。當我們需要顯示包含大量項目的列表時，例如聊天記錄、電子郵件列表或無限滾動的內容，傳統的方式是將所有項目一次性渲染到頁面上，這樣會導致頁面變得龐大、滾動卡頓，並且佔用大量的資源。

虛擬化列表通過只渲染可見部分的項目，而不是全部項目，來解決這個問題。它根據頁面的滾動位置和可視區域的大小，動態地決定哪些項目需要被渲染，並在滾動時動態加載和卸載項目。這樣可以大大減少頁面的 DOM 元素數量，提高頁面的加載速度和性能，同時節省資源和內存。

虛擬化列表的效果是讓用戶能夠流暢地滾動長列表，同時保持頁面的快速響應。這對於提供良好的用戶體驗和提高應用程序的性能非常重要。

HTML 部份

HTML

<div id="scroll-container">
    <ul id="list-container"></ul>
</div>

CSS 部份

CSS

#scroll-container {
  height: 300px;
  overflow-y: scroll;
}

JavaScript 部份

JavaScript

var listContainer = document.getElementById('list-container');
var scrollContainer = document.getElementById('scroll-container');
var itemsPerPage = 20;
var currentPage = 1;

// 模擬一個包含大量項目的數據集
var dataset = [];
for (var i = 1; i <= 10000; i++) {
    dataset.push('項目 ' + i);
}

function loadItems(page) {
    var start = (page - 1) * itemsPerPage;
    var end = start + itemsPerPage;
    var items = dataset.slice(start, end);

    items.forEach(function (item) {
        var li = document.createElement('li');
        li.textContent = item;
        listContainer.appendChild(li);
    });
}

function handleScroll() {
    if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
        currentPage++;
        loadItems(currentPage);
    }
}

scrollContainer.addEventListener('scroll', handleScroll);

// 初始化頁面
loadItems(currentPage);

作用及目的

HTML 部份

CSS 部份

JavaScript 部份

效果示範