526互联

MutationObserver、IntersectionObserver和ResizeObserver的区别

发布时间 2024-01-12 11:08:56作者: ygunoil

这三个观察者（Observers）都属于Web API，允许开发人员监测DOM元素或其内容的变化，并在发生变化时执行相应的操作。它们之间有一些区别和适用场景

一、MutationObserver

MutationObserver接口提供了一种异步机制来观察DOM树的变化，并在变化发生后触发回调函数。它能够监听DOM节点的属性、子节点的添加/删除以及文本节点的更改等。

1.1用法

const observer = new MutationObserver(callback);

// 配置需要观察的变化类型
const config = { attributes: true, childList: true, subtree: true };

// 开始观察目标节点
observer.observe(targetNode, config);

1.2案例

const callback = (mutationsList, observer) => {
  for (let mutation of mutationsList) {
  	 const { removedNodes, type, target } = mutation;
    if (type === 'childList') {
      console.log('子节点发生改变.');
    } else if (type === 'attributes') {
      console.log('属性值发生改变');
    }
  }
};

const observer = new MutationObserver(callback);
const targetNode = document.getElementById('waterMark');
const config = { attributes: true, childList: true, subtree: true };

observer.observe(targetNode, config);

上面简单案例中用到一些属性及配置项，MutationObserver文档讲解得也比较详细，具体请参考 MutationObserver文档

1.3 特点

  • MutationObserver适用于需要监测DOM树变化的情况，如观察节点添加、删除和属性更改等。
  • MutationObserver是异步的，它会等待DOM操作完成后才触发回调函数。
  • MutationObserver可以观察整个DOM树或特定节点及其子树。

二、IntersectionObserver

IntersectionObserver接口提供了一种异步机制来观察目标元素与其祖先元素或视窗（viewport）之间的交叉状态。它常用于实现懒加载、无限滚动等场景。

2.1 用法

const observer = new IntersectionObserver(callback, options);

// 开始观察目标元素
observer.observe(targetElement);

2.2 案例

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('视线中');
    } else {
      console.log('视线外');
    }
  });
};

const observer = new IntersectionObserver(callback);
const targetElement = document.querySelector('.lazy-load');

observer.observe(targetElement);

上面简单案例中用到一些属性及配置项，IntersectionObserver文档讲解得也比较详细，具体请参考 IntersectionObserver文档

2.3 特点:

  • IntersectionObserver适用于需要监测元素与视窗（或其祖先元素）之间的交叉状态的情况。
  • IntersectionObserver是异步的，它会将元素进入或离开视窗的信息传递给回调函数。
  • IntersectionObserver可以同时观察多个目标元素，并提供了一些配置选项，如root、rootMargin和threshold。

三、ResizeObserver

ResizeObserver接口提供了一种异步机制来观察目标元素的尺寸变化，当目标元素的大小发生变化时，会触发回调函数。

3.1 用法

const observer = new ResizeObserver(callback);

// 开始观察目标元素
observer.observe(targetElement);

3.2 案例

const callback = (entries, observer) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(width, height );
  });
};

const observer = new ResizeObserver(callback);
const targetElement = document.getElementById('.box');

observer.observe(targetElement);

上面简单案例中用到一些属性及配置项，ResizeObserver文档讲解得也比较详细，具体请参考 ResizeObserver文档

3.3 特点

  • ResizeObserver适用于需要监测元素尺寸变化的情况，如自适应布局、动态调整等。
  • ResizeObserver是异步的，在目标元素大小变化后才触发回调函数。
  • ResizeObserver只能观察单个目标元素的尺寸变化。