您的当前位置：首页正文

js ResizeObserver API

来源：步旅网

一、ResizeObserver 是什么

ResizeObserver 是一个浏览器提供的 JavaScript API，用于监测一个元素的大小变化。它可以帮助开发者在元素的宽度或高度发生改变时执行某些操作，比如调整布局、重新渲染内容等。

二、Resize Observer和监听resize的区别及其优缺点

在 JavaScript 中，Resize Observer 和监听窗口的 resize 事件是用来处理元素大小变化的两种不同的方法。下面是它们的区别以及各自的优缺点：

Resize Observer
优点

高效：只会在目标元素大小变化时触发回调，而不是每次窗口大小变化时都触发。
精确：可以监测多个元素的变化，而不必依赖于全局的窗口大小事件。
异步处理：可以在变更后立即获取新的尺寸，不会阻塞浏览器的渲染流程。

缺点

浏览器支持：虽然现代浏览器都支持，但老旧的浏览器可能不兼容。
复杂性：对于简单的场景使用起来可能显得有些复杂。

resize
优点

简单易用：代码实现简单，适合基础的窗口变化监听。
广泛兼容：支持所有主流浏览器，因为这是一个较早的 API。

缺点

性能问题：当窗口调整大小时，可能会频繁触发，因为即使没有实际内容变化，事件也会被触发。
不够精确：无法监测单个元素的大小变化，只能检测窗口的大小。
处理延迟：可能需要使用节流（throttling）或防抖（debouncing）技术来提高性能，增加了实现复杂性。

总结
使用场景：如果你需要监测特定元素的大小变化，Resize Observer 是更好的选择。如果只是需要监测窗口大小变化，使用 resize 事件更为简单。
选择依据：基于项目需求和浏览器兼容性来决定使用哪种方法。对于性能要求高和需要精确控制的情况，Resize Observer 更合适；而对于基础的窗口调整监控，监听 resize 事件可能就足够了。
希望这些信息能帮助你理解 Resize Observer 和窗口 resize 事件的区别及各自的优缺点！

三、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #elem {
        width: 400px;
        height: 400px;
        background-color: green;
        resize: both;
        overflow: auto;
      }
    </style>
</head>
<body>
  <div id="elem">
    resize auto
  </div>

  <button onClick="handleToggleClick()">监听/取消监听</button>

  <script>
    /**
     * @type { ResizeObserver | null }
     */
    let observer = null;
    let isToggle = false;
    let elemDom = document.getElementById('elem');

    function observeElem() {
      observer = new ResizeObserver((entries) => {
        for (let entry of entries) {
          console.log(entry);
        }
      })
      if (observer !== null) observer.observe(elemDom); // 监听
    }

    function rmObserve() {
      if (observer) {
        observer.unobserve(elemDom); // 取消监听
      }
    }

    function handleToggleClick() {
      isToggle = !isToggle;
      if (isToggle) {
        return observeElem();
      }

      return rmObserve();
    }
  </script>
</body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文