JavaScript内核与高级编程之：`JavaScript` 的 `Resize Observer`：如何高效地监听 `DOM` 元素尺寸变化，避免 `layout thrashing`。

各位观众老爷们，大家好！今天咱们聊聊一个在前端开发中容易被忽略，但关键时刻能让你少掉头发的利器：Resize Observer。别听到“Observer”就觉得高深莫测，其实它就是个负责任的“尺寸观察员”，专门盯着你指定的 DOM 元素，一旦它们的尺寸发生了变化，它就立刻通知你，让你能及时做出调整。

一、为什么需要 Resize Observer？

在没有 Resize Observer 的日子里，我们想监听元素的尺寸变化，通常会怎么做呢？大概率是监听 window 的 resize 事件，或者用 setInterval 定时检测元素的 offsetWidth 和 offsetHeight。

这两种方法都有各自的弊端：

监听 window.resize： 这种方式太“粗犷”了，任何窗口大小的改变都会触发，即使目标元素根本没动，你也要跟着瞎忙活。而且，如果你的页面布局复杂，某个元素的尺寸变化可能会间接导致其他元素也跟着变，这样 window.resize 就会被频繁触发，性能可想而知。
setInterval 定时检测： 这种方式更“暴力”，不管元素有没有变化，你都定时去检查一遍。想象一下，你的 CPU 就像个没日没夜工作的保安，不停地巡逻，即使风平浪静也要走一圈，效率极其低下。

这两种方式都会导致一个可怕的现象： Layout Thrashing（布局抖动）。

什么是 Layout Thrashing 呢？ 简单来说，就是你的 JavaScript 代码频繁地读写 DOM 元素的属性（比如 offsetWidth、offsetHeight、scrollTop 等），导致浏览器不断地进行布局计算（Layout）和重绘（Repaint），最终导致页面卡顿。

举个例子：

<div id="myElement" style="width: 200px; height: 100px;"></div>
<script>
  function updateElementWidth() {
    let element = document.getElementById('myElement');
    let currentWidth = element.offsetWidth;
    element.style.width = (currentWidth + 10) + 'px'; // 修改宽度
    console.log('宽度已更新：', element.offsetWidth); // 读取宽度
  }

  setInterval(updateElementWidth, 10); // 每 10 毫秒更新一次宽度
</script>

这段代码看似简单，但却隐藏着巨大的性能风险。每隔 10 毫秒，它都会先读取元素的宽度 (offsetWidth)，然后修改元素的宽度，最后又读取元素的宽度。每次修改宽度都会触发 Layout，而紧接着的读取操作又会强制浏览器立即进行布局计算，导致 Layout Thrashing。

Resize Observer 的出现，就是为了解决这些问题。它可以精确地监听指定元素的尺寸变化，而且是异步执行的，避免了 Layout Thrashing。

二、 Resize Observer 的基本用法

Resize Observer 的用法非常简单，主要分为以下几个步骤：

创建 ResizeObserver 实例：
```
const observer = new ResizeObserver(entries => {
  // 回调函数，当元素尺寸发生变化时会被调用
  // entries 是一个数组，包含所有被观察的元素的信息
});
```
ResizeObserver 的构造函数接收一个回调函数，这个回调函数会在被观察的元素尺寸发生变化时被调用。 entries 参数是一个数组，包含了所有被观察的元素的信息，每个元素的信息都封装在一个 ResizeObserverEntry 对象中。
指定要观察的元素：
```
const element = document.getElementById('myElement');
observer.observe(element);
```
使用 observer.observe() 方法来指定要观察的元素。你可以同时观察多个元素。
处理尺寸变化：

在回调函数中，你可以访问 ResizeObserverEntry 对象来获取元素的尺寸信息：
```
const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`元素 ${entry.target.id} 的尺寸变化：宽度 ${width}，高度 ${height}`);
    // 在这里进行你的业务逻辑处理
  });
});
```
ResizeObserverEntry 对象包含以下属性：
- target：被观察的 DOM 元素。
- contentRect：一个 DOMRectReadOnly 对象，包含了元素的 content box 的尺寸信息。 content box 指的是元素的内容区域，不包括 padding、border 和 margin。
- borderBoxSize：一个 ResizeObserverSize 对象的数组，提供元素的 border box 的尺寸信息。 border box 包括 content, padding 和 border。
- contentBoxSize：一个 ResizeObserverSize 对象的数组，提供元素的 content box 的尺寸信息。
- devicePixelContentBoxSize：一个 ResizeObserverSize 对象的数组，提供元素的 content box 的尺寸信息，以设备像素为单位。
停止观察：

当你不再需要观察某个元素时，可以使用 observer.unobserve() 方法来停止观察：
```
observer.unobserve(element);
```
如果你想停止观察所有元素，可以使用 observer.disconnect() 方法：
```
observer.disconnect();
```

三、 ResizeObserver 的优势

精确监听： Resize Observer 只会在被观察的元素尺寸真正发生变化时才会触发回调函数，避免了不必要的计算。
异步执行： Resize Observer 的回调函数是异步执行的，这意味着它不会阻塞主线程，避免了 Layout Thrashing。
性能优化： Resize Observer 由浏览器底层实现，经过了高度优化，性能远优于传统的监听方式。
支持 content box 和 border box： 你可以选择监听元素的 content box 或 border box 的尺寸变化，更加灵活。
兼容性好： 主流浏览器都支持 Resize Observer，包括 Chrome、Firefox、Safari 和 Edge。对于不支持的浏览器，可以使用 polyfill。

四、实际应用场景

Resize Observer 在前端开发中有广泛的应用场景，比如：

响应式布局： 根据元素的尺寸变化，动态调整元素的样式和布局。
自适应组件： 根据容器的尺寸变化，自动调整组件的尺寸和内容。
瀑布流布局： 根据图片的尺寸变化，动态调整图片的位置。
虚拟滚动： 根据容器的尺寸变化，动态加载和卸载列表项。
图表绘制： 根据容器的尺寸变化，动态调整图表的尺寸和比例。

五、示例代码

下面是一些 Resize Observer 的示例代码，希望能帮助你更好地理解它的用法。

1. 响应式布局：

<div id="container">
  <div id="content">
    <h1>Hello, Resize Observer!</h1>
    <p>This is a responsive layout example.</p>
  </div>
</div>
<style>
  #container {
    width: 500px;
    height: 300px;
    border: 1px solid black;
  }

  #content {
    padding: 20px;
  }

  @media (max-width: 400px) {
    #content {
      font-size: 14px;
    }
  }
</style>
<script>
  const container = document.getElementById('container');
  const content = document.getElementById('content');

  const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
      if (entry.contentRect.width < 400) {
        content.style.fontSize = '14px';
      } else {
        content.style.fontSize = '16px';
      }
    });
  });

  observer.observe(container);
</script>

在这个例子中，我们监听了容器的尺寸变化，当容器的宽度小于 400px 时，将内容的字体大小设置为 14px，否则设置为 16px。

2. 自适应组件：

<div id="widget-container">
  <my-widget></my-widget>
</div>

<script>
  class MyWidget extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' });
      this.shadow.innerHTML = `
        <style>
          :host {
            display: block;
            width: 100%; /* 重要：占据容器的全部宽度 */
            height: 100%; /* 重要：占据容器的全部高度 */
          }
          .widget-content {
            width: 100%;
            height: 100%;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
          }
        </style>
        <div class="widget-content">
          My Widget
        </div>
      `;

      this.resizeObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
          const width = entry.contentRect.width;
          const height = entry.contentRect.height;
          console.log(`Widget 尺寸变化：宽度 ${width}，高度 ${height}`);
          // 根据尺寸调整组件内部的样式或行为
          // 例如，调整字体大小、隐藏部分元素等
          if (width < 200) {
            this.shadow.querySelector('.widget-content').style.fontSize = '12px';
          } else {
            this.shadow.querySelector('.widget-content').style.fontSize = '20px';
          }
        });
      });
    }

    connectedCallback() {
      this.resizeObserver.observe(this);
    }

    disconnectedCallback() {
      this.resizeObserver.disconnect();
    }
  }

  customElements.define('my-widget', MyWidget);
</script>

在这个例子中，我们创建了一个自定义组件 my-widget，它会根据容器的尺寸变化，自动调整组件内部的字体大小。注意，widget 的 :host 必须设置为 display: block; width: 100%; height: 100%; ，这样才能占据容器的全部空间，从而触发 ResizeObserver。

3. 瀑布流布局：

（由于瀑布流布局的代码比较复杂，这里只提供一个思路，不提供完整的代码）

你可以使用 Resize Observer 监听每张图片的尺寸变化，然后根据图片的尺寸动态计算图片的位置，从而实现瀑布流布局。

六、注意事项

避免无限循环： 在回调函数中修改元素的尺寸可能会导致 Resize Observer 被再次触发，从而形成无限循环。为了避免这种情况，你可以使用 requestAnimationFrame 来延迟修改元素的尺寸。
```
const observer = new ResizeObserver(entries => {
  requestAnimationFrame(() => {
    entries.forEach(entry => {
      // 修改元素尺寸的代码
    });
  });
});
```
及时停止观察： 当你不再需要观察某个元素时，一定要及时停止观察，避免内存泄漏。
处理 border-box 和 content-box： 根据你的需求选择监听 border-box 或 content-box 的尺寸变化。
Polyfill： 对于不支持 Resize Observer 的浏览器，可以使用 polyfill 来提供兼容性。比较流行的 polyfill 有：resize-observer-polyfill。

七、总结

Resize Observer 是一个非常强大的工具，可以帮助我们高效地监听 DOM 元素的尺寸变化，避免 Layout Thrashing，提升页面性能。在前端开发中，如果你需要监听元素的尺寸变化，强烈建议你使用 Resize Observer。

最后，给大家留个思考题：如何使用 Resize Observer 实现一个自适应的视频播放器，使其能够根据容器的尺寸自动调整视频的尺寸和比例？

今天的讲座就到这里，感谢大家的观看！祝大家早日摆脱 Layout Thrashing 的困扰，写出高性能的 Web 应用！

发表回复 取消回复

发表回复取消回复