如何实现前端的懒加载和预加载

懒加载 与 预加载 是前端优化的两个重要策略：懒加载 是一种按需加载资源的策略，只有当用户滚动到页面的某部分或当组件需要被显示时，才加载相应的资源；而 预加载 是一种性能优化技巧，它会在用户浏览页面时提前加载重要资源，以便在未来的某个点上快速使用。要实现懒加载，可以使用原生JavaScript中的 IntersectionObserver API或者各种JavaScript库来观察元素是否进入了视口，再决定是否加载内容。另一方面，预加载则可以通过在HTML中使用 <link rel="preload"> 或利用Service Workers来实现，目的是确保用户交互时能够立即获取到资源。

懒加载 的详细描述：懒加载通过推迟加载非关键资源的方式，可以减少初始页面加载的时间、减少带宽使用以及提高用户体验。它们往往用于图片、视频以及一些非首屏的大型文件上。当用户实际需要这些内容时，懒加载确保了这些内容才被下载和渲染，这样做的结果是对于用户可感知的页面加载速度有显著提升，尤其对于移动设备用户来说，这是提升性能的一种有效途径。

一、实现懒加载的方法

使用IntersectionObserver API

IntersectionObserver 是原生JavaScript提供的用于监测元素是否进入可视区域的API。与传统的 scroll 事件监听相比，IntersectionObserver 提供了更为精准和高效的方式来实现懒加载：

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载目标元素，比如图片
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
// 对目标元素进行观察
document.querySelectorAll('.lazy-load').forEach(img => {
  observer.observe(img);
});

在这段代码中，.lazy-load 是需要进行懒加载的图片的类名。图片的实际 src 属性值被存储在 data-src 中，只有当图片进入视口时，我们才将 data-src 的值赋给 src 属性，从而触发图片的加载。

使用第三方库

对于不支持 IntersectionObserver 的浏览器或者希望减少手动编码的工作量，可以使用如 lozad.js、lazysizes 等JavaScript库来简化实现过程：

<script src="path/to/lazysizes.min.js" async></script>

在引入这些库后，通常只需在HTML标签中添加特定的类名或数据属性，库的代码会自动处理懒加载的逻辑。

二、实现预加载的方法

使用Link标签

HTML中的 <link> 标签支持 rel="preload" 属性，该属性可以让开发者指定哪些资源是在页面加载初期就需要的：

<link rel="preload" href="important-script.js" as="script">
<link rel="preload" href="important-style.css" as="style">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

在这个例子中，我们提前加载了一个JS脚本、一个CSS样式表和一个字体文件。这些文件会在浏览器空闲时提前加载，并存储在浏览器的缓存中，待需求出现时立即可用。

使用Service Workers

Service Workers 运行在浏览器背后，形成一个独立的线程，可以控制资源的缓存和网络请求。通过Service Workers，开发者可以预加载资源，并应对复杂的缓存策略：

self.addEventListener('install', function(event) {
  event.wAItUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/css/important-style.css',
        '/js/important-script.js'
      ]);
    })
  );
});