JavaScript与CSS优化——懒加载

在Web开发领域，性能优化始终是一个重要的话题。随着项目规模的扩大和复杂性的增加，JavaScript和CSS的优化变得尤为关键。

二、懒加载（Lazy Loading）
 

懒加载是一种优化网页或应用的技术，它会按需加载资源，而不是一次性加载所有资源。这对于拥有大量图片或多媒体内容的网站尤其有用。

懒加载的好处：
- **减少初始负载**：用户不需要一次性加载所有资源。
- **节省带宽**：只有当用户滚动到页面的特定部分时，才加载资源。
- **提升用户体验**：减少了页面加载时间，提高了用户体验。

1. 图片懒加载

我们可以使用`Intersection Observer API`来实现图片的懒加载。

示例代码：
 

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers without IntersectionObserver support
    // ...
  }
});
```

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('img.lazy');
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        image.classList.remove('lazy');
        observer.unobserve(image);
      }
    });
  });
  lazyImages.forEach(image => {
    imageObserver.observe(image);
  });
});

在HTML中，我们可以这样使用：
 

< img class="lazy" data-src="image.jpg" alt="Lazy Image">

2. 组件懒加载

在上一篇提到的React代码分割示例中，我们已经看到了如何使用`React.lazy`来实现组件的懒加载。同样的原理也适用于Vue、Angular等其他前端框架。