JS监听元素尺寸变化？3种方法助你轻松搞定！

在前端开发中，监听 JavaScript 元素的尺寸变化至关重要。本文深入探讨了三种主流方案：**ResizeObserver**、**MutationObserver** 以及传统的事件监听方式。**ResizeObserver** 作为现代浏览器的首选，以其高效和专为尺寸监听而设计的特性脱颖而出，但需注意兼容性。对于需要兼容旧版浏览器的场景，**MutationObserver** 提供了备选方案，虽然性能稍逊，但仍能满足需求。而传统的事件监听方式，如 `window.onresize`，虽然兼容性最佳，但在性能方面存在短板，更适用于全局性的操作。文章还分享了如何通过节流和防抖技术优化频繁尺寸变化带来的性能问题，助你选择最合适的监听方案，提升Web应用的性能与用户体验。

监听元素尺寸变化的三种方案中，ResizeObserver 是最优选择，因其性能高效且专为此设计；若需兼容旧浏览器，可选用 MutationObserver 或传统事件监听。1. ResizeObserver：现代浏览器首选，仅在元素尺寸变化时触发回调，API 简洁高效；2. MutationObserver：通过监听 DOM 属性变化间接实现，适用于需兼容旧版浏览器但性能略差；3. 传统事件监听：如 window.onresize，兼容性最好但性能较差且监听全局。对于频繁变化，建议使用节流或防抖优化性能。

监听 JavaScript 中元素尺寸变化，主要有三种方案：ResizeObserver、MutationObserver 以及传统的事件监听方式（例如 window.onresize）。ResizeObserver 是目前最推荐的方式，因为它性能好，专门为监听元素尺寸变化而生。但兼容性方面需要考虑，如果需要兼容老版本浏览器，MutationObserver 或事件监听可能是更好的选择。

ResizeObserver：现代浏览器的首选

ResizeObserver 接口允许你监听 HTML 元素的尺寸变化。它比传统的 window.onresize 事件更高效，因为它只在目标元素尺寸真正发生变化时才触发回调，避免了不必要的计算。

基本用法:

const element = document.getElementById('yourElement');

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;

    console.log(`Element's new size: width=${width}, height=${height}`);
    // 在这里执行你的逻辑，例如重新布局、更新图表等
  }
});

resizeObserver.observe(element);

// 如果不再需要监听，可以取消监听
// resizeObserver.unobserve(element);
// 或者取消所有监听
// resizeObserver.disconnect();

优势:

• 高效: 只有在元素尺寸真正变化时才触发回调。
• 简单易用: API 设计简洁明了。
• 针对性强: 专门用于监听元素尺寸变化。

兼容性:

需要考虑浏览器的兼容性。可以查阅 Can I Use 网站了解详细信息。对于不支持 ResizeObserver 的浏览器，需要使用其他方案。

MutationObserver：监听 DOM 变化的备选方案

MutationObserver 接口可以监听 DOM 树的变化，包括元素的属性、子节点等。虽然它不是专门为监听元素尺寸变化而设计的，但可以通过监听元素的属性变化来间接实现。

基本用法:

const element = document.getElementById('yourElement');

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 检查元素的宽度或高度是否发生变化
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      console.log(`Element's size changed: width=${width}, height=${height}`);
    }
  });
});

observer.observe(element, {
  attributes: true,
  attributeFilter: ['style'] // 只监听 style 属性的变化
});

// 停止监听
// observer.disconnect();

缺点:

• 性能: 比 ResizeObserver 性能稍差，因为需要监听所有属性变化，然后过滤出与尺寸相关的变化。
• 复杂性: 使用起来比 ResizeObserver 更复杂。

适用场景:

• 需要兼容老版本浏览器，且对性能要求不高。
• 需要监听元素尺寸变化之外的其他 DOM 变化。

传统事件监听：兼容性最好的方案

可以使用 window.onresize 事件来监听窗口大小的变化，然后根据窗口大小的变化来判断元素尺寸是否发生变化。

基本用法:

window.onresize = () => {
  const element = document.getElementById('yourElement');
  const width = element.offsetWidth;
  const height = element.offsetHeight;

  console.log(`Element's size changed: width=${width}, height=${height}`);
};

缺点:

• 性能: 每次窗口大小变化都会触发回调，即使元素尺寸没有发生变化。
• 全局性: 监听的是全局窗口的 resize 事件，而不是特定元素的尺寸变化。

适用场景:

• 需要兼容所有浏览器。
• 只需要在窗口大小变化时执行一些全局性的操作。

如何选择合适的监听方案？

选择哪种监听方案取决于你的具体需求。

• 如果只需要监听元素尺寸变化，且不需要兼容老版本浏览器，那么 ResizeObserver 是最佳选择。
• 如果需要兼容老版本浏览器，且对性能要求不高，那么 MutationObserver 是一个不错的备选方案。
• 如果需要兼容所有浏览器，且只需要在窗口大小变化时执行一些全局性的操作，那么可以使用传统的事件监听方式。

如何处理频繁的尺寸变化？

如果元素尺寸变化非常频繁，可能会导致回调函数被频繁调用，影响性能。可以使用节流或防抖技术来限制回调函数的执行频率。

节流:

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

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

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

const throttledResizeObserver = new ResizeObserver(throttle(entries => {
  // 处理尺寸变化
  console.log("Throttled resize event");
}, 200)); // 200ms 节流

防抖:

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const debouncedResizeObserver = new ResizeObserver(debounce(entries => {
  // 处理尺寸变化
  console.log("Debounced resize event");
}, 200)); // 200ms 防抖

使用 CSS 媒体查询监听元素尺寸变化？

虽然 CSS 媒体查询通常用于响应屏幕尺寸的变化，但也可以结合 JavaScript 来监听特定元素的尺寸变化。首先，在 CSS 中定义一个媒体查询，当元素满足特定尺寸条件时，应用特定的样式。然后，使用 JavaScript 来监听这些样式的变化，从而间接监听元素的尺寸变化。这种方法相对复杂，且不如 ResizeObserver 直接和高效，所以不推荐作为主要的监听方案。

好了，本文到此结束，带大家了解了《JS监听元素尺寸变化？3种方法助你轻松搞定！》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！