MutationObserver 与 ResizeObserver：前端监控尺寸变化的利器

2024-02-02 22:13:44

前言

随着 Web 技术的不断发展，响应式布局已成为当今 Web 设计的标配。响应式布局要求网站能够根据用户的设备和屏幕尺寸自动调整布局，以提供最佳的浏览体验。为了实现响应式布局，我们需要一种方法来监控 DOM 元素的尺寸变化，以便在尺寸变化时动态调整元素的样式。

MutationObserver

MutationObserver 是一个 DOM API，它允许我们监听 DOM 元素的各种变化，包括节点的添加、删除、属性的变化等。我们可以在需要监听尺寸变化的元素上添加 MutationObserver，当元素的尺寸发生变化时，MutationObserver 就会触发回调函数，我们可以通过回调函数来处理尺寸变化事件。

MutationObserver 的基本用法如下：

const target = document.getElementById('my-element');

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes') {
      if (mutation.attributeName === 'width' || mutation.attributeName === 'height') {
        // 元素的尺寸发生了变化
      }
    }
  });
});

observer.observe(target, {
  attributes: true,
  attributeFilter: ['width', 'height']
});

上面的代码中，我们首先获取要监听的元素 target，然后创建一个 MutationObserver 实例 observer。在 observer 实例中，我们定义了一个回调函数，这个回调函数会在 target 元素的属性发生变化时被触发。在回调函数中，我们可以通过 mutation.attributeName 属性来判断是哪个属性发生了变化，如果 mutation.attributeName 是 width 或 height，则表示元素的尺寸发生了变化。

ResizeObserver

ResizeObserver 是一个专门用于监听元素尺寸变化的 API。与 MutationObserver 相比，ResizeObserver 具有更好的性能，因为它只会在元素的尺寸发生变化时触发回调函数，而 MutationObserver 还会在其他类型的 DOM 变化时触发回调函数。

ResizeObserver 的基本用法如下：

const target = document.getElementById('my-element');

const observer = new ResizeObserver(function(entries) {
  entries.forEach(function(entry) {
    // 元素的尺寸发生了变化
  });
});

observer.observe(target);

上面的代码中，我们首先获取要监听的元素 target，然后创建一个 ResizeObserver 实例 observer。在 observer 实例中，我们定义了一个回调函数，这个回调函数会在 target 元素的尺寸发生变化时被触发。

比较

MutationObserver 和 ResizeObserver 都可以用来监听 DOM 元素的尺寸变化，但它们有一些区别。

MutationObserver 是一个通用的 DOM 变化监听 API，它可以监听 DOM 的各种变化，包括节点的添加、删除、属性的变化等。ResizeObserver 是一个专门用于监听元素尺寸变化的 API，它只会在元素的尺寸发生变化时触发回调函数。
MutationObserver 的性能不如 ResizeObserver 好，因为它会在所有类型的 DOM 变化时触发回调函数，而 ResizeObserver 只会在元素的尺寸发生变化时触发回调函数。

最佳实践

在使用 MutationObserver 和 ResizeObserver 时，我们可以遵循以下最佳实践：

只在需要时使用 MutationObserver 和 ResizeObserver。如果不需要监听 DOM 元素的尺寸变化，则不要使用这些 API，以避免不必要的性能开销。
在使用 MutationObserver 时，只监听必要的属性变化。如果只需要监听元素的尺寸变化，则只监听 width 和 height 属性的变化，以避免不必要的回调函数触发。
在使用 ResizeObserver 时，可以在回调函数中使用 debounce 或 throttle 函数来减少回调函数的触发频率，以提高性能。