JavaScript内核与高级编程之：`JavaScript`的`IntersectionObserver`：其在高效监听元素可见性上的实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位码友，今天咱们唠唠嗑，主题是JavaScript里的一个“隐身高手”—— IntersectionObserver。别看名字长，这家伙干的活儿那叫一个实在，能帮你高效地监听元素在页面上的可见性。

一、可见性？这有啥用？

可能有些小伙伴会嘀咕，元素可见不可见，这有啥大不了的？咱们先想想，在Web开发中，哪些场景需要关注元素的可见性：

懒加载图片： 只有当图片进入视口才加载，节省流量，提高页面加载速度。
无限滚动： 当滚动到页面底部时，自动加载更多内容。
广告曝光统计： 只有当广告出现在用户眼前时才算一次有效曝光。
动画效果触发： 元素进入视口时，触发动画。
粘性导航栏： 导航栏滚动到顶部时，固定在顶部。

如果没有 IntersectionObserver，我们通常会用 scroll 事件来监听滚动条，然后计算元素的位置，判断是否可见。但是，scroll 事件触发频率太高了，频繁的计算和重绘会严重影响性能。这就像你一边跑马拉松，一边还要不停地解数学题，能不累吗？

二、IntersectionObserver：优雅的解决方案

IntersectionObserver 就像一个专业的“观察员”，它会默默地观察目标元素与视口（或者指定的祖先元素）的交叉情况，并在交叉状态发生变化时通知你。关键是，它使用异步回调，不会阻塞主线程，性能非常高。简单来说，就是它自己默默地看着，等到有情况了再告诉你，你不用自己去费力计算。

三、IntersectionObserver 的基本用法

创建 IntersectionObserver 实例：
```
const observer = new IntersectionObserver(callback, options);
```
- callback：当目标元素的可见性发生变化时，会执行的回调函数。
- options：配置选项，用于控制观察行为。
callback 回调函数：
```
function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      console.log('元素进入视口了！', entry.target);
    } else {
      // 元素离开视口
      console.log('元素离开视口了！', entry.target);
    }
  });
}
```
- entries：一个数组，包含多个 IntersectionObserverEntry 对象，每个对象对应一个被观察的元素。
- observer：IntersectionObserver 实例本身。
- entry.isIntersecting：布尔值，表示元素是否与视口交叉。
- entry.target：被观察的 DOM 元素。
- entry.intersectionRatio：交叉比例，表示元素与视口的交叉面积占元素自身面积的比例。取值范围是 0 到 1。如果元素完全可见，则 intersectionRatio 为 1；如果元素完全不可见，则 intersectionRatio 为 0。
options 配置选项：
- root：指定根元素，用于确定交叉区域。默认值是视口 null。可以设置为文档中的任何元素。
- rootMargin：指定根元素的边距。可以使用 CSS 的 margin 语法，例如 "10px 20px 30px 40px"。用于调整交叉区域的大小。
- threshold：指定交叉比例的阈值。可以是一个数字，也可以是一个数组。如果是一个数字，表示当交叉比例达到或超过该阈值时，才会触发回调函数。如果是一个数组，表示当交叉比例达到或超过数组中的任何一个阈值时，都会触发回调函数。

开始观察元素：

const targetElement = document.getElementById('myElement');
observer.observe(targetElement);

停止观察元素：

observer.unobserve(targetElement); // 停止观察单个元素
observer.disconnect(); // 停止观察所有元素

四、代码示例：懒加载图片

<!DOCTYPE html>
<html>
<head>
  <title>懒加载图片</title>
  <style>
    img {
      width: 300px;
      height: 200px;
      background-color: #eee;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <img data-src="image1.jpg" alt="Image 1">
  <img data-src="image2.jpg" alt="Image 2">
  <img data-src="image3.jpg" alt="Image 3">
  <img data-src="image4.jpg" alt="Image 4">

  <script>
    const images = document.querySelectorAll('img');

    function loadImage(image) {
      image.src = image.dataset.src;
      image.onload = () => {
        image.removeAttribute('data-src'); // 图片加载后，移除 data-src 属性
      };
    }

    function callback(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const image = entry.target;
          loadImage(image);
          observer.unobserve(image); // 加载完成后，停止观察
        }
      });
    }

    const options = {
      rootMargin: '0px',
      threshold: 0.1 // 当图片至少 10% 可见时，加载图片
    };

    const observer = new IntersectionObserver(callback, options);

    images.forEach(image => {
      observer.observe(image);
    });
  </script>
</body>
</html>

在这个例子中，我们使用了 data-src 属性来存储图片的真实地址。当图片进入视口时，我们将其 src 属性设置为 data-src 的值，从而开始加载图片。加载完成后，我们移除 data-src 属性，并停止观察该图片。这样就实现了图片的懒加载。

五、代码示例：无限滚动

<!DOCTYPE html>
<html>
<head>
  <title>无限滚动</title>
  <style>
    .item {
      width: 100%;
      height: 200px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
  <div id="load-more">加载更多</div>

  <script>
    const container = document.getElementById('container');
    const loadMore = document.getElementById('load-more');
    let itemCount = 7;

    function loadItems() {
      for (let i = 0; i < 3; i++) {
        const item = document.createElement('div');
        item.classList.add('item');
        item.textContent = `Item ${itemCount++}`;
        container.appendChild(item);
      }
    }

    function callback(entries, observer) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadItems();
          observer.unobserve(loadMore); // 加载更多后，停止观察，避免重复加载
          observer.observe(loadMore); // 重新开始观察
        }
      });
    }

    const options = {
      rootMargin: '0px',
      threshold: 0.1
    };

    const observer = new IntersectionObserver(callback, options);

    observer.observe(loadMore);
  </script>
</body>
</html>

在这个例子中，我们使用了一个 load-more 元素作为触发加载更多内容的“哨兵”。当 load-more 元素进入视口时，我们加载更多内容，并重新开始观察 load-more 元素。这样就实现了无限滚动。

六、root 和 rootMargin 的妙用

root 和 rootMargin 可以让你更灵活地控制交叉区域。

root: 默认情况下，IntersectionObserver 使用视口作为根元素。但是，你可以将 root 设置为文档中的任何元素。例如，你可以将 root 设置为一个容器元素，然后监听目标元素在该容器内的可见性。
rootMargin: rootMargin 用于调整根元素的边距。它可以让你在目标元素实际进入视口之前或之后触发回调函数。例如，你可以使用 rootMargin 来预加载图片，或者在元素离开视口一段时间后停止动画。

举个例子，假设你有一个固定高度的容器，你想在元素进入容器顶部 50px 范围内时触发回调函数：

const options = {
  root: document.getElementById('myContainer'),
  rootMargin: '-50px 0px 0px 0px', // 顶部边距为 -50px
  threshold: 0
};

在这个例子中，我们将 root 设置为 myContainer 元素，并将 rootMargin 的顶部边距设置为 -50px。这意味着，当目标元素距离容器顶部 50px 时，就会触发回调函数。

七、threshold 的灵活应用

threshold 属性允许你指定交叉比例的阈值，用于控制何时触发回调函数。

单个阈值： 如果你只指定一个阈值，例如 threshold: 0.5，则只有当交叉比例达到或超过 0.5 时，才会触发回调函数。
多个阈值： 你可以指定一个阈值数组，例如 threshold: [0, 0.25, 0.5, 0.75, 1]。当交叉比例达到或超过数组中的任何一个阈值时，都会触发回调函数。这可以让你更精细地控制观察行为。

例如，你可以使用多个阈值来实现一个进度条效果：

const options = {
  threshold: [0, 0.25, 0.5, 0.75, 1]
};

function callback(entries, observer) {
  entries.forEach(entry => {
    const intersectionRatio = entry.intersectionRatio;
    console.log('交叉比例：', intersectionRatio);
    // 根据交叉比例更新进度条
    // ...
  });
}

在这个例子中，我们指定了一个阈值数组 [0, 0.25, 0.5, 0.75, 1]。当交叉比例达到或超过这些阈值时，我们会更新进度条。

八、性能优化：节流和防抖

虽然 IntersectionObserver 性能很高，但在某些情况下，回调函数仍然可能被频繁触发。为了避免性能问题，我们可以使用节流或防抖来限制回调函数的执行频率。

节流： 在一定时间内，只允许回调函数执行一次。
防抖： 在一定时间内，如果回调函数被多次触发，则只执行最后一次。

例如，我们可以使用节流来限制无限滚动中加载更多内容的频率：

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const now = Date.now();

    if (!timeoutId) {
      if (now - lastExecTime >= delay) {
        func.apply(context, args);
        lastExecTime = now;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(context, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay - (now - lastExecTime));
      }
    }
  };
}

const throttledLoadItems = throttle(loadItems, 500); // 500 毫秒节流

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      throttledLoadItems();
      observer.unobserve(loadMore);
      observer.observe(loadMore);
    }
  });
}

在这个例子中，我们使用了一个 throttle 函数来限制 loadItems 函数的执行频率。这样可以避免在快速滚动时频繁加载更多内容，从而提高性能。

九、兼容性问题

IntersectionObserver 的兼容性还不错，主流浏览器都支持。但是，对于一些老旧的浏览器，可能需要使用 polyfill。你可以使用 polyfill.io 或者其他 polyfill 库来提供兼容性支持。

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

十、总结

IntersectionObserver 是一个强大的工具，可以帮助你高效地监听元素的可见性。掌握了它的用法，你就可以轻松地实现懒加载图片、无限滚动、广告曝光统计等功能，从而提升Web应用的性能和用户体验。

特性	描述
异步回调	使用异步回调，不会阻塞主线程，性能高。
灵活配置	可以通过 `root`、`rootMargin` 和 `threshold` 属性来灵活地配置观察行为。
兼容性良好	主流浏览器都支持，对于老旧浏览器可以使用 polyfill。
易于使用	API 简单易懂，容易上手。
适用场景广泛	适用于懒加载图片、无限滚动、广告曝光统计等需要监听元素可见性的场景。

好了，今天的分享就到这里。希望大家以后在开发中能充分利用 IntersectionObserver 这个“隐身高手”，让你的Web应用更上一层楼！感谢各位的聆听！

发表回复 取消回复

发表回复取消回复