JavaScript懒加载就是虚拟列表吗？

发布时间：2025-09-21 11:38:28 阅读量： 0 来源： 互联网转载

虚拟列表是一种常见的懒加载技术，但不是唯一的懒加载技术。懒加载技术的主要目的是提高页面的渲染性能，通过减少不必要的资源加载来达到这一目的。

虚拟列表就是在这样的背景下产生的，在需要呈现大量列表数据的情况下，如果一次性将所有数据加载到页面上，会导致页面加载缓慢，体验不佳。虚拟列表通过只呈现用户当前看到的列表部分，其他部分不呈现，在用户滚动页面时再渲染所需的数据，从而减少不必要的数据渲染，提高页面渲染性能。

举个例子，假设一个页面上需要呈现 100000 条数据，如果一次性呈现所有数据，那么浏览器需要处理 100000 条数据，加载速度会比较慢。但如果使用虚拟列表技术，只呈现用户当前看到的部分，比如说只呈现 1000 条数据，用户滚动页面时再加载其他数据，就可以显著地提高页面加载速度。

实现虚拟列表的过程中，需要计算出每个列表项的高度，以及当前可见列表部分的索引范围。然后根据这些信息，决定呈现哪些列表项。这些列表项可以通过 DOM 元素呈现，也可以通过渲染在 canvas 上的图像呈现。

在实际开发过程中，通常会使用框架或库提供的虚拟列表组件，不必手动实现。这样可以简化代码，并确保实现的稳定性和兼容性。常见的框架或库有 React、Vue、Angular 等。

总之，虚拟列表是一种重要的懒加载技术，在大量列表数据的情况下能够提高页面渲染性能，改善用户体验。

另外还有基于 Intersection Observer Api 的懒加载，它可以**元素是否进入了用户的可视范围，如果进入了可视范围，则加载该元素的内容，从而实现懒加载。

下面是一个基于 JavaScript 原生 API 的懒加载实现代码：

Const images = document.querySelectorAll("img[data-src]");function loadImage(image) {  image.setAttribute("src", image.getAttribute("data-src"));  image.onload = function() {    image.removeAttribute("data-src");  };}function checkVisibility(image) {  const rect = image.getBoundingClientRect();  return (    rect.top >= 0 &&    rect.left >= 0 &&    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&    rect.right <= (window.innerWidth || document.documentElement.clientWidth)  );} function lazyLoad() {  for (Let i = 0; i < images.length; i++) {    const image = images[i];    if (checkVisibility(image)) {      loadImage(image);    }  }}window.addEventListener("load", lazyLoad);window.addEventListener("scroll", lazyLoad);

这段代码使用了以下步骤：

1. 选择所有带有 data-src 属性的图片。

2. 定义 loadImage 函数，该函数从 data-src 属性中获取图片地址，并将其设置为图片的 src 属性。

3. 定义 checkVisibility 函数，该函数检查图片是否在当前可视区域内。

4. 定义 lazyLoad 函数，该函数遍历所有图片，如果图片可见，则加载图片。

5. 绑定 load 和 scroll 事件，当事件触发时，调用 lazyLoad 函数。

这段代码演示了如何实现懒加载，但不保证兼容性和性能。如果需要更高效、兼容性更好的懒加载实现，可以使用框架或库提供的组件。

JavaScript懒加载就是虚拟列表吗？

热门文章