使用 Intersection Observer 提高网站性能

首页 > 编程 > 使用 Intersection Observer 提高网站性能

使用 Intersection Observer 提高网站性能

发布于2024-07-30

Enhancing Website Performance with Intersection Observer

介绍

为了寻求更快、更高效的网络体验，开发人员不断寻求新的方法来优化性能。 Intersection Observer API 是 Web 开发人员武器库中的一项强大工具。此 API 允许您观察目标元素可见性的变化，从而启用延迟加载和延迟内容加载等高级策略。在本博客中，我们将探讨如何使用 Intersection Observer API 来提高网站的性能。

什么是交叉口观察者？

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。这对于用户向下滚动页面时延迟加载图像或其他内容特别有用。

性能改进的关键用例

延迟加载图像和 iframe：仅在图像和 iframe 即将进入视口时才加载图像和 iframe，减少初始加载时间。
屏外内容的延迟加载：延迟加载广告、视频或繁重脚本等内容，直到它们出现在视图中。
无限滚动：当用户向下滚动页面时加载更多内容。
分析跟踪：跟踪元素何时进入用户参与分析视图。

基本用法

让我们深入了解 Intersection Observer API 的基本实现。

创建交叉口观察器

首先，创建 IntersectionObserver 的实例：

let observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Perform actions when the element is visible
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target); // Stop observing after loading
    }
  });
}, {
  root: null, // relative to document viewport
  rootMargin: '0px', // margin around root
  threshold: 0.1 // visible amount of item shown in relation to root
});

观察目标元素

选择要观察的元素并开始观察：

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

延迟加载的 HTML 结构

使用数据属性确保您的 HTML 结构支持延迟加载：

高级配置

为了进行更多控制，您可以调整根边距和阈值选项：

根边距：在内容进入视口之前稍微预加载内容。

rootMargin: '100px' // preload 100px before entering viewport

Threshold：确定在触发回调之前应该有多少元素可见。

threshold: [0.25, 0.5, 0.75, 1] // trigger at 25%, 50%, 75%, and 100% visibility

实际示例：延迟加载图像

这是延迟加载图像的完整示例：

JavaScript 代码

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = document.querySelectorAll("img.lazy");

  let imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(image => {
    imageObserver.observe(image);
  });
});