探秘神奇的IntersectionObserver：释放网页性能的黑科技！ - 掘金

引言

1. 是什么：介绍 IntersectionObserver 技术基础知识、兼容性以及原理

2. 做什么：介绍 IntersectionObserver 在多场景的应用和实战代码，同时会介绍笔者总结的一些进阶技巧和最佳实践，其中应用场景多达 10 个：
• 图片懒加载
• 无限滚动加载
• 广告展示控制
• 有效曝光埋点
• 用户兴趣埋点
• 可视区域内外动画/视频暂停（腾讯视频列表效果）
• 视差效果与动画
• 标题和导航联动
• 虚拟列表优化
• 消息已读状态标记（各聊天软件）

3. 哪些坑：介绍 IntersectionObserver 怎么测试和调试以及一些限制

1. IntersectionObserver 的概述

1.1 起源

1.2 IntersectionObserver 是什么？

1.3 IntersectionObserver 的特性

• 异步执行：IntersectionObserver 是异步执行的，它使用浏览器的内部优化机制，不会阻塞主线程，从而避免了性能问题。

• 节省资源：相比于传统的滚动事件或定时器，IntersectionObserver 可以精确地观察元素与视窗的交叉状态，避免了不必要的计算和回调触发，从而节省了资源的消耗。

• 多目标观察：IntersectionObserver 可以同时观察多个目标元素，通过回调函数逐个通知开发者它们的交叉状态，方便进行批量操作。

• 自定义阈值：开发者可以设定一个或多个阈值，用来定义元素与视窗的交叉比例。当交叉比例超过或低于阈值时，会触发相应的回调函数。

2. 兼容性

2.1 原生支持度

2.2 polyfill

3. IntersectionObserver 的工作原理

3.1 观察目标元素

3.2 目标元素与视窗的交叉区域

• 进入视窗：当目标元素的一部分进入视窗时，被称为进入视窗。

• 完全进入视窗：当目标元素完全进入视窗时，被称为完全进入视窗。

• 离开视窗：当目标元素完全离开视窗时，被称为离开视窗。

• 部分离开视窗：当目标元素的一部分离开视窗时，被称为部分离开视窗。

3.3 回调函数和阈值

3.4 IntersectionObserver 的运行机制

惰性计算
为了避免性能问题和不必要的计算，IntersectionObserver 采用了惰性计算的策略。它并不实时地计算目标元素与视窗的交叉状态，而是在特定时机进行计算。
当一个目标元素进入或离开视窗的边界区域时，浏览器会通知 IntersectionObserver 进行交叉状态的计算。这样可以避免对所有元素进行持续的计算，从而节省了资源并提高了性能。

队列处理
为了保证运行的平滑性，IntersectionObserver 使用了队列处理的机制。当目标元素的交叉状态发生变化时，会将变化的目标元素放入一个队列中。
IntersectionObserver 会在下一个动画帧或微任务中处理队列中的元素。这种延迟处理的方式可以避免在一帧内频繁触发大量回调函数，从而提供更流畅的用户体验。

优化算法
为了提高性能和减少回调触发的次数，IntersectionObserver 使用了一些优化算法。它会将目标元素进行分组，并按照它们在文档中的顺序进行观察。
当观察到交叉状态变化时，IntersectionObserver 会将变化的目标元素放入队列中，并按照它们在文档中的顺序进行处理。这样可以确保回调函数的触发顺序与元素在文档中的顺序一致，避免出现混乱或错误的情况。

4 IntersectionObserver 的应用场景

4.1 图片懒加载

1. 创建 IntersectionObserver 实例，并指定观察的目标元素。

2. 在回调函数中，判断目标元素是否进入视窗。

3. 若目标元素进入视窗，将其真实的图片地址赋给元素的 src 属性，触发图片加载。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将真实的图片地址赋给 src 属性
      observer.unobserve(img); // 停止观察该图片
    }
  });
});

const lazyImages = document.querySelectorAll('.lazy-image');
lazyImages.forEach((img) => {
  observer.observe(img); // 开始观察每个图片元素
});

4.2 无限滚动加载

1. 创建 IntersectionObserver 实例，并指定观察的目标元素，通常是页面底部的加载指示器或占位符元素。

2. 在回调函数中，判断目标元素是否进入视窗。

3. 若目标元素进入视窗，触发数据加载的操作，并更新页面内容。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadMoreData(); // 触发数据加载操作
    }
  });
});

const loader = document.querySelector('.loader');
observer.observe(loader); // 开始观察加载指示器元素

<template>
  <div
    class="load-more-sentinel"
    v-show="sentinelEnabled"
    ref="loadMoreSentinel"
  >
    <div v-show="showLoading" class="load-more">
      <slot>
        <span v-for="i in 5" :style="`--order:${i}`" :key="`circle${i}`"></span>
      </slot>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce';

export default {
  name: 'load-more',
  props: {
    sentinelEnabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showLoading: false,
    };
  },
  watch: {
    sentinelEnabled: {
      handler() {
        // 因为浏览器渲染机制会在微任务执行之后执行渲染线程，之后执行宏任务，所以 setTimeout 可以保证dom已经更新
        if (!this.observer && this.$refs.loadMoreSentinel) {
          this.timer = setTimeout(() => {
            const node = this.$refs.loadMoreSentinel;
            if (node) {
              const options = {
                threshold: [0],
              };
              this.observer = new IntersectionObserver(
                debounce(this.insideViewportCb, 50),
                options
              );
              this.observer.observe(node);
            }
          }, 20);
        }
      },
      immediate: true,
    },
  },
  created() {
    this.observer = null;
    this.timer = null;
  },
  destroyed() {
    if (this.observer) this.observer.disconnect();
    if (this.timer) = clearTimeout(this.timer);
  },
  methods: {
    insideViewportCb([entry]) {
      if (this.sentinelEnabled && entry && entry.isIntersecting) {
        this.showLoading = true;
        this.$emit('load-more');
      }
    },
    finish() {
      this.showLoading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.load-more-sentinel {
  width: 100%;
  height: 15px;
  .load-more {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    margin: 8px 0;
    span {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 5px;
      border-radius: 50%;
      background: $Gray8_a080;
      animation: load 1.04s ease infinite;
      animation-delay: calc(var(--order) * 0.13s);
      &:last-child {
        margin-right: 0px;
      }
    }
  }
}
@keyframes load {
  from {
    opacity: 1;
    transform: scale(1.3);
  }
  to {
    opacity: 0.2;
    transform: scale(0.3);
  }
}
</style>

4.3 广告展示控制

1. 延迟加载广告：只有当广告元素进入视窗时才开始加载广告内容，从而减少不必要的请求和资源消耗。

2. 动态展示广告：可以根据广告元素与视窗的交叉比例来决定广告的展示方式。例如，可以在广告元素完全进入视窗后才显示广告，或者在广告元素的一部分进入视窗时展示部分广告内容。

3. 预加载广告：可以在广告元素进入视窗之前提前加载广告内容，以减少展示广告的延迟时间。

jsconst observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      showAd(entry.target); // 显示广告
      observer.unobserve(entry.target); // 停止观察该广告元素
    } else {
      hideAd(entry.target); // 隐藏广告
    }
  });
});

const ads = document.querySelectorAll('.ad');
ads.forEach((ad) => {
  observer.observe(ad); // 开始观察每个广告元素
});

4.4 有效曝光埋点

1. 创建 IntersectionObserver 实例，并指定观察的目标元素。

2. 在回调函数中，根据目标元素的交叉状态判断是否曝光。

3. 根据业务需求，记录曝光数据或触发相应的操作。

jsconst observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      trackExposure(entry.target); // 记录曝光数据或触发相应操作
      observer.unobserve(entry.target); // 停止观察该目标元素
    }
  });
});

const elements = document.querySelectorAll('.exposure-element');
elements.forEach((element) => {
  observer.observe(element); // 开始观察每个目标元素
});

4.5 用户兴趣埋点

1. 创建 IntersectionObserver 实例，并指定观察的目标元素。

2. 在回调函数中，根据目标元素的交叉状态判断用户对该元素的兴趣。

3. 根据规则判断适口停留时间是否满足条件。

4. 如果满足条件，则记录兴趣数据或触发相应操作。 示例代码如下：

jsconst observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting &&
        entry.intersectionRatio >= 0.5 &&
        entry.intersectionRect.width >= entry.boundingClientRect.width * 0.5 &&
        entry.intersectionRect.height >= entry.boundingClientRect.height * 0.5 &&
        entry.time >= 2000
      ) {
      trackInterest(entry.target); // 记录兴趣数据或触发相应操作
    }
  });
});

const elements = document.querySelectorAll('.interest-element');
elements.forEach((element) => {
  observer.observe(element); // 开始观察每个目标元素
});

4.6 可视区域内外动画/视频暂停（腾讯视频 app 列表效果）

1. 自动播放与暂停：当视频元素完全进入视窗时，自动播放视频；当视频元素完全离开视窗时，暂停视频的播放。这样可以确保只有在用户可见的范围内才播放视频，避免不必要的资源浪费和带宽消耗。

2. 音频控制：当视频元素进入视窗时，开始播放视频的音频；当视频元素完全离开视窗时，暂停视频的音频。这样可以确保只有在用户可见的范围内才播放视频的声音，避免用户同时播放多个视频的声音干扰。

3. 视频列表优化：当网页中包含多个视频列表时，只有在用户滚动或浏览到特定视频时才播放该视频，其他视频则保持暂停状态。这样可以减少同时加载和播放多个视频对带宽和性能的压力，提升页面加载速度和用户体验。

4. 节省用户流量：当用户在移动设备上浏览网页时，可以通过 IntersectionObserver 监测视频元素与视窗的交叉状态，仅当视频元素进入视窗时才加载和播放视频。这样可以避免不必要的流量消耗，节省用户的数据流量。

jsconst observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const video = entry.target;
    if (entry.isIntersecting) {
      video.play(); // 播放视频
    } else {
      video.pause(); // 暂停视频
    }
  });
});

const videos = document.querySelectorAll('video');
videos.forEach((video) => {
  observer.observe(video); // 开始观察每个视频元素
});

4.7 视差效果与动画

1. 滚动视差效果：当网页中的元素与视窗交叉时，根据滚动的位置和速度，以不同的速率和方向来移动元素，创造出立体感和深度感。例如，背景图片或图层随滚动动态移动，给用户带来视觉上的差异感和沉浸感。

2. 动态加载和过渡效果：当元素进入视窗时，根据预定义的动画效果或过渡效果，使元素以流畅和吸引人的方式进入页面。例如，图片或文本逐渐渐显现，元素从一种状态平滑过渡到另一种状态，为用户提供更优雅的页面加载和内容展示。

3. 触发动画效果：当特定元素进入视窗时，通过 IntersectionObserver 触发相应的动画效果，增加用户与页面的互动性。例如，当用户滚动到某个区域时，元素以动画形式弹出、旋转、渐变等，吸引用户的注意力和参与度。

4. 动态内容加载：当用户滚动到页面底部或特定区域时，通过 IntersectionObserver 触发动态加载更多的内容。这种技术常用于实现无限滚动列表或延迟加载，提供流畅的用户体验，避免一次性加载大量内容带来的性能问题。

5. 页面交互控制：通过观察元素与视窗的交叉状态，根据需要触发特定的交互控制。例如，当特定元素完全进入视窗时，启用按钮、链接或其他交互元素；当元素完全离开视窗时，禁用或隐藏相关元素。

4.8 标题和导航联动

4.9 虚拟列表优化

4.10 消息已读状态标记

js// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 当消息元素进入可视区域时，将其标记为已读
      markMessageAsRead(entry.target);
    }
  });
});

// 获取所有消息元素
const messageElements = document.querySelectorAll('.message');

// 监测每个消息元素与可视区域的交叉情况
messageElements.forEach((messageElement) => {
  observer.observe(messageElement);
});

// 标记消息为已读的逻辑
function markMessageAsRead(messageElement) {
  // 将消息标记为已读状态，例如改变消息的样式或发送已读状态的请求
  messageElement.classList.add('read');
  // 其他处理逻辑...
}

4.11 更多应用

5. 进阶技巧与最佳实践

1. 选择合适的根元素 根据你的需求，选择合适的根元素进行监听。根元素可以是整个文档或特定的容器元素。确保选择的根元素能够包含你要监听的目标元素。

2. 优化阈值设置 设置合适的交叉比例阈值可以减少不必要的回调函数触发。过多的阈值设置可能会导致频繁的回调函数执行，因此需要根据具体情况进行优化。

3. 避免频繁的回调函数执行 由于 IntersectionObserver 可能在短时间内多次触发回调函数，为了避免频繁的操作或网络请求，可以使用节流（throttling）或防抖（debouncing）技术进行处理。节流可以限制回调函数的执行频率，而防抖可以在指定时间内的连续触发中只执行最后一次。

4. 优化性能与资源消耗 尽管 IntersectionObserver 可以提供更好的性能，但当处理大量元素或复杂布局时，仍需考虑性能和资源消耗。可以结合使用时间间隔、限制最大触发次数等策略，确保在合理的范围内处理交叉状态变化。

5. 控制监听范围 仅监听真正需要监测的元素，避免不必要的监听。过多的监听会增加性能消耗，并可能导致不必要的回调函数触发。

6. 谨慎使用多个 IntersectionObserver 当需要监测多个元素时，使用多个 IntersectionObserver 可能会增加代码复杂性和性能开销。在这种情况下，可以考虑合并监听逻辑，减少 IntersectionObserver 的数量。

7. 处理边界情况 注意处理边界情况，如元素尺寸变化、容器滚动等。在这些情况下，IntersectionObserver 可能无法及时检测到交叉状态的变化，需要进行额外的处理。

8. 考虑兼容性 尽管大多数现代浏览器都支持 IntersectionObserver，但在一些旧版本浏览器中可能不被支持。为了确保兼容性，可以使用 IntersectionObserver 的 polyfill 或提供降级方案。

9. 处理 IntersectionObserver 回调中的异步操作
• 取消异步操作：在某些情况下，当元素离开视窗或不再需要异步操作时，可能需要取消正在进行的异步操作。例如，当用户迅速滚动页面时，可能需要取消之前触发的异步操作，以避免不必要的网络请求或计算。可以使用适当的方法，如取消 Promise 或中断正在进行的异步任务。
• 性能优化：对于耗时的异步操作，需要注意性能优化。考虑使用并发执行、缓存结果或其他优化策略，以减少延迟和资源消耗。

10. 清理资源 当不再需要 IntersectionObserver 监听或元素被销毁时，确保正确地清理和释放相关的资源。取消监听、解除绑定和清理回调函数，以避免内存泄漏和不必要的资源占用。

6. 测试和调试方法

• 使用 console.log() 在回调函数中输出相关信息，例如元素的交叉状态、触发的次数等

• 在 Elements 面板中，你可以检查元素的状态、样式和位置，以验证是否正确地添加和移除 IntersectionObserver 监听。

• 在开发者工具的设备模式中，可以模拟不同的视口大小和设备类型。这样可以测试不同屏幕尺寸下的元素交叉状态变化

• 编写单元测试来验证 IntersectionObserver 的功能和效果。使用测试框架和断言库，编写针对回调函数和交叉状态的测试用例，并确保代码在各种情况下都能正常工作。

• 将 IntersectionObserver 集成到实际的网页或应用中，并进行真实场景的测试。测试不同交互操作、滚动行为、布局变化等情况下的效果，并确保交互和性能的预期达到。

7 总结

1. 减少性能开销：与传统的滚动事件相比，IntersectionObserver 监听元素的可见性变化，而不是每次滚动都触发事件。这样可以大大减少性能开销，尤其在处理大量元素或复杂布局的情况下效果更为显著。

2. 精确可靠的交叉检测：IntersectionObserver 提供了精确可靠的元素交叉检测功能。它使用几何学算法，无论是元素进入视窗、完全可见还是离开视窗，都可以准确地检测到，而不会受到滚动速度、滚动方向或缩放等因素的影响。

3. 异步执行：IntersectionObserver 是通过异步执行回调函数来处理交叉状态变化的。这意味着浏览器可以优化执行顺序，并且不会阻塞主线程。这对于优化页面性能和流畅度非常有益。

4. 支持懒加载和动态加载：通过 IntersectionObserver，可以实现懒加载图片、延迟加载内容块等动态加载的功能。只有当元素进入视窗时，才会触发加载操作，可以节省带宽和资源，并提高页面加载速度。

1. 兼容性：尽管现代浏览器大多支持 IntersectionObserver，但在一些旧版本的浏览器中可能不被支持。为了确保广泛的兼容性，开发者需要根据项目需求考虑是否需要提供降级方案或使用 polyfill。

2. 事件顺序不确定性：由于 IntersectionObserver 是异步执行的，不同元素的回调函数执行顺序是不确定的。这可能会导致在处理相关逻辑时需要额外的注意，以确保正确的顺序和逻辑关联性。

3. 对于某些特殊情况的支持不完整：IntersectionObserver 在一些特殊情况下的支持可能不完整，例如浏览器缩放或滚动容器的变化。在这些情况下，可能需要额外的处理来确保准确的交叉状态检测。

4. 性能监控的限制：虽然 IntersectionObserver 可以监测元素的可见性，但并不能直接提供元素的具体位置信息。如果需要精确的元素位置信息来进行性能监控或其他操作，可能需要额外的计算或结合其他技术来实现。

最后