HTML的`loading=’lazy’`属性：原生懒加载机制的实现原理与兼容性考量 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

HTML 的 `loading='lazy'` 属性：原生懒加载机制的实现原理与兼容性考量

大家好！今天我们来深入探讨 HTML 中 loading='lazy' 属性，这是一个强大的原生懒加载特性，可以显著提升网页性能。我们将从实现原理、兼容性、使用场景以及一些高级用法等方面进行全面的分析。

1. 懒加载的必要性与传统实现方式

在网页开发中，图片、iframe 等资源可能占据大量的带宽和渲染时间。如果用户首次访问页面时，屏幕外的资源也被立即加载，这会造成不必要的资源浪费，降低页面加载速度，影响用户体验。这就是懒加载技术诞生的原因。

传统懒加载实现方式：

在 loading='lazy' 出现之前，通常使用 JavaScript 来实现懒加载。其基本原理是：

监听 scroll 事件或者使用 Intersection Observer API。
判断目标元素是否进入视口（viewport）。
当元素进入视口时，将 src 属性设置为真实的图片 URL，触发图片加载。

以下是一个使用 JavaScript 实现懒加载的示例：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Lazy Loading</title>
<style>
  .lazy-load {
    opacity: 0; /* 初始状态隐藏图片 */
    transition: opacity 0.5s ease-in;
  }

  .lazy-load.loaded {
    opacity: 1; /* 加载完成后显示图片 */
  }
</style>
</head>
<body>

  <img class="lazy-load" data-src="image1.jpg" alt="Image 1">
  <img class="lazy-load" data-src="image2.jpg" alt="Image 2">
  <img class="lazy-load" data-src="image3.jpg" alt="Image 3">

  <script>
    const lazyImages = document.querySelectorAll('.lazy-load');

    function lazyLoad(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.add('loaded');
          observer.unobserve(img); // 停止观察已加载的图片
        }
      });
    }

    const options = {
      root: null, // 使用 viewport 作为根元素
      rootMargin: '0px',
      threshold: 0.2 // 当 20% 的图片进入视口时触发
    };

    const observer = new IntersectionObserver(lazyLoad, options);

    lazyImages.forEach(img => {
      observer.observe(img);
    });
  </script>

</body>
</html>

这个例子中，图片初始状态的 src 属性是空的，真实的图片 URL 存储在 data-src 属性中。当图片进入视口时，JavaScript 代码会将 data-src 的值赋给 src，从而触发图片加载。

传统懒加载的缺点：

代码复杂性： 需要编写大量的 JavaScript 代码，包括事件监听、视口判断、属性操作等。
性能开销： 频繁的 scroll 事件监听或者 Intersection Observer 回调可能会带来性能开销。
依赖 JavaScript： 如果用户禁用 JavaScript，懒加载将失效。

2. `loading='lazy'` 的原理与优势

loading='lazy' 属性的出现，使得懒加载的实现变得非常简单。它是一种原生浏览器支持的懒加载机制，无需编写任何 JavaScript 代码。

loading 属性的取值：

lazy: 延迟加载资源，直到它接近视口。
eager: 立即加载资源，无论它是否在视口内。
auto: 由浏览器决定是否使用懒加载。这是默认值。

实现原理：

浏览器会根据 loading='lazy' 属性，自动判断资源是否接近视口。如果资源接近视口，浏览器会发起网络请求，加载资源。这个过程由浏览器底层优化，通常比 JavaScript 实现的懒加载更高效。

优势：

简单易用： 只需添加一个 HTML 属性即可实现懒加载。
性能优化： 浏览器原生支持，通常比 JavaScript 实现更高效。
无需 JavaScript： 即使禁用 JavaScript，懒加载仍然有效。
减少代码量： 不需要编写额外的 JavaScript 代码，减少了代码维护成本。

基本用法：

<img src="image.jpg" alt="Description" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

只需要在 <img> 和 <iframe> 标签中添加 loading="lazy" 属性，即可启用懒加载。

3. 兼容性分析与降级方案

虽然 loading='lazy' 属性已经得到了广泛的支持，但仍然有一些老旧的浏览器不支持。因此，在实际应用中，需要考虑兼容性问题，并提供相应的降级方案。

兼容性：

浏览器	版本	支持情况
Chrome	76+	支持
Firefox	75+	支持
Safari	13+	支持
Edge	79+	支持
Opera	63+	支持
IE	所有版本	不支持

可以看到，主流的现代浏览器都支持 loading='lazy' 属性，但是 Internet Explorer 并不支持。

降级方案：

对于不支持 loading='lazy' 属性的浏览器，可以使用以下两种降级方案：

使用 JavaScript 库： 可以使用一些成熟的 JavaScript 懒加载库，例如 Lozad.js、lazyload 等。这些库会自动检测浏览器是否支持 loading='lazy' 属性，如果不支持，则使用 JavaScript 实现懒加载。

<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading with Lozad.js</title>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
</head>
<body>

  <img class="lozad" data-src="image1.jpg" alt="Image 1">
  <img class="lozad" data-src="image2.jpg" alt="Image 2">
  <img class="lozad" data-src="image3.jpg" alt="Image 3">

  <script>
    const observer = lozad(); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
    observer.observe();
  </script>

</body>
</html>

在这个例子中，使用了 Lozad.js 库来实现懒加载。只需要将 src 属性替换为 data-src，并添加 lozad 类名，然后调用 observer.observe() 方法即可。Lozad.js 会自动处理兼容性问题。

条件加载 JavaScript 代码： 可以使用 JavaScript 代码检测浏览器是否支持 loading='lazy' 属性，如果不支持，则加载 JavaScript 懒加载代码。

<!DOCTYPE html>
<html>
<head>
<title>Conditional Lazy Loading</title>
</head>
<body>

  <img data-src="image1.jpg" alt="Image 1" loading="lazy">
  <img data-src="image2.jpg" alt="Image 2" loading="lazy">
  <img data-src="image3.jpg" alt="Image 3" loading="lazy">

  <script>
    if (!('loading' in HTMLImageElement.prototype)) {
      // 如果浏览器不支持 loading 属性，则加载 JavaScript 懒加载代码
      const script = document.createElement('script');
      script.src = 'lazyload.js'; // 替换为你的懒加载脚本
      document.body.appendChild(script);
    } else {
      // 如果支持 loading 属性，则将 data-src 替换为 src
      const lazyImages = document.querySelectorAll('img[loading="lazy"]');
      lazyImages.forEach(img => {
        img.src = img.dataset.src;
      });
    }
  </script>

</body>
</html>

在这个例子中，首先检测浏览器是否支持 loading 属性。如果不支持，则动态加载 lazyload.js 文件。如果支持，则将 data-src 属性的值赋给 src 属性。

4. 使用场景与最佳实践

loading='lazy' 属性适用于各种需要延迟加载资源的场景，例如：

长页面： 对于包含大量图片的长页面，可以使用 loading='lazy' 属性来延迟加载屏幕外的图片，提高页面加载速度。
图片画廊： 对于图片画廊等应用，可以使用 loading='lazy' 属性来延迟加载缩略图或大图，减少初始加载时间。
视频网站： 对于视频网站，可以使用 loading='lazy' 属性来延迟加载视频封面图片，提高页面加载速度。
广告： 对于广告，可以使用 loading='lazy' 属性来延迟加载广告图片或 iframe，避免影响页面性能。

最佳实践：

优先使用原生懒加载： 如果浏览器支持 loading='lazy' 属性，优先使用原生懒加载，避免引入额外的 JavaScript 库。
设置占位符： 在图片加载完成之前，可以使用占位符来避免页面布局跳动。可以使用 CSS 设置图片的宽高，或者使用 SVG 占位符。
优化图片大小： 尽量压缩图片大小，减少图片加载时间。可以使用工具来优化图片，例如 ImageOptim、TinyPNG 等。
监控性能： 使用 Chrome DevTools 等工具来监控页面性能，确保懒加载能够带来性能提升。
考虑用户体验： 懒加载可能会导致一些用户体验问题，例如图片加载延迟、页面滚动卡顿等。需要根据实际情况进行调整，找到性能和用户体验之间的平衡点。

示例：带有占位符的懒加载

<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading with Placeholder</title>
<style>
  .image-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #f0f0f0; /* 占位符颜色 */
  }

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例 */
  }
</style>
</head>
<body>

  <div class="image-container">
    <img src="placeholder.svg" data-src="image1.jpg" alt="Image 1" loading="lazy">
  </div>

  <div class="image-container">
    <img src="placeholder.svg" data-src="image2.jpg" alt="Image 2" loading="lazy">
  </div>

  <div class="image-container">
    <img src="placeholder.svg" data-src="image3.jpg" alt="Image 3" loading="lazy">
  </div>

  <script>
    // 简单的 JavaScript 兼容性处理
    if ('loading' in HTMLImageElement.prototype) {
      const lazyImages = document.querySelectorAll('img[loading="lazy"]');
      lazyImages.forEach(img => {
        img.src = img.dataset.src;
      });
    } else {
      // 加载 polyfill 或者使用其他懒加载方案
    }
  </script>

</body>
</html>

在这个例子中，使用了 placeholder.svg 作为占位符。在图片加载完成之前，会显示占位符，避免页面布局跳动。object-fit: cover 属性可以保持图片比例。

5. 高级用法与性能调优

除了基本用法之外，loading='lazy' 属性还有一些高级用法，可以进一步优化性能。

1. 设置 fetchpriority 属性：

fetchpriority 属性可以控制资源的加载优先级。可以将其设置为 high、low 或 auto。

high: 告诉浏览器，资源应该具有高优先级。
low: 告诉浏览器，资源应该具有低优先级。
auto: 由浏览器决定资源的优先级。

可以结合 loading='lazy' 属性和 fetchpriority 属性，来优化资源的加载顺序。例如，对于视口内的重要图片，可以设置 fetchpriority="high"，对于视口外的图片，可以设置 loading="lazy"。

<img src="important.jpg" alt="Important Image" fetchpriority="high">
<img src="lazy.jpg" alt="Lazy Image" loading="lazy" fetchpriority="low">

2. 使用 sizes 和 srcset 属性：

sizes 和 srcset 属性可以根据屏幕大小，选择合适的图片资源。可以结合 loading='lazy' 属性，来延迟加载不同尺寸的图片。

<img
  src="image-480w.jpg"
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Responsive Image"
  loading="lazy"
>

在这个例子中，根据屏幕大小，浏览器会自动选择合适的图片资源。loading='lazy' 属性可以延迟加载这些图片，提高页面加载速度。

3. 使用 decode 属性 (实验性):

decode 属性是一个实验性属性，可以控制图片的解码方式。可以将其设置为 sync 或 async。

sync: 同步解码图片。
async: 异步解码图片。

默认情况下，浏览器会异步解码图片。但是，在某些情况下，同步解码图片可能会提高渲染性能。可以尝试使用 decode="sync" 属性，来优化图片的解码方式。

<img src="image.jpg" alt="Image" loading="lazy" decode="sync">

4. 性能调优：

避免过度使用懒加载： 不要对所有图片都使用懒加载。对于视口内的重要图片，应该立即加载，避免用户等待。
设置合适的阈值： 浏览器会根据一定的阈值来判断资源是否接近视口。可以根据实际情况调整阈值，例如使用 Intersection Observer API 来精确控制懒加载的时机。
监控性能： 使用 Chrome DevTools 等工具来监控页面性能，确保懒加载能够带来性能提升。

6. `loading='lazy'` 的未来发展趋势

随着 Web 技术的不断发展，loading='lazy' 属性也在不断完善。未来，可能会出现以下发展趋势：

更智能的懒加载： 浏览器可能会根据用户的网络状况、设备性能等因素，自动调整懒加载策略。
更灵活的配置： 可能会提供更多的属性，来控制懒加载的行为，例如设置加载优先级、指定占位符等。
更广泛的支持： 希望更多的浏览器能够支持 loading='lazy' 属性，减少兼容性问题。

7. 总结与核心要点

loading='lazy' 属性是 HTML 提供的一个强大的原生懒加载机制，可以显著提升网页性能，它易于使用，性能良好，并能在一定程度上减少对 JavaScript 的依赖。然而，考虑到兼容性问题，仍然需要针对不支持的浏览器提供降级方案。结合最佳实践，可以更好地利用 loading='lazy' 属性来优化网页加载速度，提升用户体验。

希望今天的分享能帮助大家更好地理解和应用 loading='lazy' 属性。谢谢大家！