长列表不再卡顿！虚拟列表优化渲染，浏览器性能飙升

前端

2023-10-26 02:42:50

虚拟列表：长列表渲染的救星

当我们在网页中处理长列表时，渲染性能往往成为一个瓶颈。随着列表项数量的增加，渲染时间会急剧上升，导致页面卡顿和用户体验不佳。传统的方法是直接渲染整个列表，但这会给浏览器带来沉重的负担。

虚拟列表的魔力

虚拟列表是一种创新的解决方案，可以有效地解决长列表渲染问题。它巧妙地将算法和数据结构结合在一起，只渲染当前可见的列表项，而将其余的隐藏起来。当用户滚动列表时，虚拟列表会动态地更新当前视口内的列表项，从而实现流畅的滚动效果。

实现虚拟列表的秘诀

实现虚拟列表需要一些巧妙的技巧：

列表项复用： 虚拟列表将列表项存储在一个数组中。当需要渲染新列表项时，它会从数组中取出一个已渲染的列表项并更新其内容，而不是重新渲染一个新的列表项。
高度估计： 为了准确地计算当前视口内的列表项，虚拟列表需要估计每个列表项的高度。通常，可以使用列表项的平均高度作为估计值，也可以使用更精细的估计算法。
滚动事件监听： 当用户滚动列表时，虚拟列表会监听滚动事件并根据滚动位置更新当前视口内的列表项。

虚拟列表的应用场景

虚拟列表非常适合以下场景：

长列表： 包含大量列表项的列表，例如商品列表、联系人列表等。
无限滚动： 用户向下滚动列表时，列表会自动加载更多数据，例如社交媒体的动态列表。
虚拟化表格： 表格中有大量数据，需要分批加载和渲染，例如大型电子商务网站的商品表格。

虚拟列表的好处

虚拟列表为长列表渲染带来了以下好处：

极大地提高了页面加载速度： 只渲染可见的列表项，大大减少了浏览器的负载。
显著降低了内存占用： 避免了在内存中存储大量未渲染的列表项。
实现了流畅的滚动体验： 动态更新当前视口内的列表项，消除了滚动卡顿。

代码示例

以下是一个使用 JavaScript 实现虚拟列表的代码示例：

const list = document.getElementById('list');
const items = [];

for (let i = 0; i < 1000; i++) {
  items.push(`Item ${i}`);
}

let startIndex = 0;
let endIndex = 100;

const renderList = () => {
  list.innerHTML = '';

  for (let i = startIndex; i < endIndex; i++) {
    const item = document.createElement('li');
    item.textContent = items[i];
    list.appendChild(item);
  }
};

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= list.offsetHeight) {
    startIndex += 100;
    endIndex += 100;
    renderList();
  }
});

renderList();