JavaScript内核与高级编程之：`ResizeObserver`：如何高效地监听元素的尺寸变化，避免布局抖动。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！我是今天的主讲人，咱们今天聊点儿实际的，关于前端性能优化的，就是这个ResizeObserver，一个能让你优雅地监听元素尺寸变化，告别布局抖动的神器。

为啥我们需要ResizeObserver？（故事的开端）

在Web开发的世界里，元素尺寸变化是家常便饭。浏览器窗口缩放、元素内容改变、动态插入元素等等，都会引起元素尺寸的改变。而很多时候，我们需要在元素尺寸变化的时候做一些事情，比如重新计算布局、调整样式、更新图表等等。

以前，我们通常用window.onresize事件来监听窗口的尺寸变化，或者用MutationObserver监听DOM树的变化。但这两种方式都有一些缺点：

window.onresize：只能监听窗口的尺寸变化，无法监听单个元素的尺寸变化。而且，触发频率很高，容易造成性能问题。
MutationObserver：虽然可以监听DOM树的变化，但需要配置很多参数，而且性能开销也比较大。更要命的是，它监听的是DOM 内容的变化，而不是尺寸的变化，需要自己计算尺寸差异，麻烦！

更糟糕的是，如果在尺寸变化的回调函数里，又去修改了DOM，很可能引起布局抖动（Layout Thrashing）。啥是布局抖动？就是浏览器为了计算元素的位置和大小，反复地进行布局计算，导致页面卡顿。

ResizeObserver：救星登场

ResizeObserver 就是来解决这些问题的。它专门用来监听元素的尺寸变化，而且是异步的，不会阻塞主线程，性能更好。更重要的是，它可以避免布局抖动！

ResizeObserver 的基本用法（上手指南）

ResizeObserver 的用法很简单，主要分为三步：

创建 ResizeObserver 实例：
```
const resizeObserver = new ResizeObserver(entries => {
  // 回调函数
});
```
entries 是一个数组，包含了所有被监听元素的 ResizeObserverEntry 对象。

指定监听的目标元素：

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

observe() 方法可以监听一个或多个元素。

在回调函数中处理尺寸变化：
```
const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;
    console.log(`元素尺寸变化：宽度=${width}，高度=${height}`);
    // 在这里进行相应的处理
  }
});
```
ResizeObserverEntry 对象包含了元素的信息，比如 contentRect、borderBoxSize、contentBoxSize 等等。contentRect 是元素内容区域的矩形，不包括 padding、border 和 margin。borderBoxSize 和 contentBoxSize 提供更加详细的尺寸信息，稍后会详细介绍。

一个简单的例子（代码说话）

<!DOCTYPE html>
<html>
<head>
  <title>ResizeObserver Example</title>
  <style>
    #my-element {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      padding: 20px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="my-element">Hello, ResizeObserver!</div>

  <script>
    const element = document.getElementById('my-element');

    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const width = entry.contentRect.width;
        const height = entry.contentRect.height;
        console.log(`元素尺寸变化：宽度=${width}，高度=${height}`);
        element.innerText = `宽度=${width}，高度=${height}`; // 更新元素内容
      }
    });

    resizeObserver.observe(element);

    // 模拟元素尺寸变化 (每隔2秒改变宽度)
    setInterval(() => {
      const newWidth = Math.floor(Math.random() * 300) + 100; // 100-400之间的随机宽度
      element.style.width = `${newWidth}px`;
    }, 2000);
  </script>
</body>
</html>

这个例子中，我们监听了一个 div 元素的尺寸变化，并在回调函数中更新了元素的文本内容，显示当前的宽度和高度。每隔两秒，元素的宽度会随机改变，触发 ResizeObserver 的回调函数。打开控制台，你会看到元素尺寸变化的信息。

ResizeObserverEntry 详解（深入了解）

ResizeObserverEntry 对象是 ResizeObserver 回调函数中的参数，它包含了被监听元素的信息。主要属性如下：

target: 被监听的 DOM 元素。
contentRect: 元素的 content box 的矩形，包括 x、y、width 和 height 属性。注意，这个矩形 不包括 padding、border 和 margin。
borderBoxSize: 一个 ResizeObserverSize 类型的数组，描述了元素的 border box 的尺寸。在大多数情况下，数组只有一个元素。
contentBoxSize: 一个 ResizeObserverSize 类型的数组，描述了元素的 content box 的尺寸。在大多数情况下，数组只有一个元素。

ResizeObserverSize 对象包含了 inlineSize 和 blockSize 两个属性，分别对应元素的宽度和高度。

box 选项（灵活控制）

observe() 方法还有一个可选的 options 参数，可以用来指定监听的 box 类型。默认情况下，监听的是 content-box。

resizeObserver.observe(element, { box: 'border-box' });

content-box：监听 content box 的尺寸变化。
border-box：监听 border box 的尺寸变化。
device-pixel-content-box：监听 device pixel content box 的尺寸变化。这个选项主要用于高 DPI 设备，可以更精确地获取元素的尺寸信息。

disconnect() 和 unobserve()（优雅退出）

disconnect(): 停止监听所有元素。
```
resizeObserver.disconnect();
```
unobserve(element): 停止监听指定的元素。
```
resizeObserver.unobserve(element);
```

在组件卸载或者不再需要监听元素尺寸变化的时候，一定要调用 disconnect() 或者 unobserve() 方法，释放资源，避免内存泄漏。

ResizeObserver 与布局抖动（终极武器）

ResizeObserver 能够避免布局抖动的原因是：它的回调函数是在浏览器布局完成后，在下一个渲染帧之前执行的。这意味着，在回调函数中修改 DOM 不会触发额外的布局计算。

简单来说，浏览器会把所有的尺寸变化的回调函数收集起来，然后在一次布局计算后，统一执行这些回调函数。这样就避免了反复的布局计算，提高了性能。

实际应用场景（案例分析）

响应式布局：根据元素的尺寸，动态调整布局和样式。
图表渲染：根据容器的尺寸，重新渲染图表。
瀑布流布局：根据元素的尺寸，重新计算瀑布流布局。
自定义滚动条：根据元素的尺寸，调整滚动条的位置和大小。
文本省略：根据元素的尺寸，动态调整文本省略的长度。

一个更复杂的例子（响应式图表）

假设我们需要渲染一个图表，图表的尺寸应该根据容器的尺寸自动调整。

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Chart Example</title>
  <style>
    #chart-container {
      width: 500px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="chart-container"></div>

  <script>
    const chartContainer = document.getElementById('chart-container');

    // 模拟图表渲染函数
    function renderChart(width, height) {
      console.log(`渲染图表：宽度=${width}，高度=${height}`);
      chartContainer.innerText = `图表：宽度=${width}，高度=${height}`;
      // 这里可以调用真正的图表库，比如 Chart.js 或者 ECharts
    }

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

    resizeObserver.observe(chartContainer);

    // 模拟容器尺寸变化 (每隔3秒改变宽度和高度)
    setInterval(() => {
      const newWidth = Math.floor(Math.random() * 400) + 300; // 300-700之间的随机宽度
      const newHeight = Math.floor(Math.random() * 200) + 150; // 150-350之间的随机高度
      chartContainer.style.width = `${newWidth}px`;
      chartContainer.style.height = `${newHeight}px`;
    }, 3000);
  </script>
</body>
</html>

在这个例子中，我们使用 ResizeObserver 监听图表容器的尺寸变化，并在回调函数中重新渲染图表。这样，无论容器的尺寸如何变化，图表都能自动适应。

兼容性问题（老朋友，又见面了）

ResizeObserver 的兼容性还不错，主流浏览器都支持。但是，对于一些老旧的浏览器，可能需要使用 polyfill。

一个常用的 polyfill 是 polyfill-library，它可以根据浏览器的 User Agent 自动加载需要的 polyfill。

总结（划重点啦！）

ResizeObserver 是一个专门用来监听元素尺寸变化的 API。
它可以避免布局抖动，提高性能。
用法简单，主要分为三步：创建实例、指定监听目标、处理回调函数。
ResizeObserverEntry 对象包含了元素的信息，比如 contentRect、borderBoxSize 和 contentBoxSize。
可以使用 box 选项指定监听的 box 类型。
记得在不再需要监听元素尺寸变化的时候，调用 disconnect() 或者 unobserve() 方法，释放资源。

彩蛋（再多说两句）

ResizeObserver 虽然强大，但也不是万能的。在一些特殊情况下，可能仍然需要使用其他的技术来监听元素尺寸变化。比如，如果需要监听元素的 transform 属性的变化，ResizeObserver 就无能为力了。

总的来说，ResizeObserver 是一个非常有用的 API，可以帮助我们更高效地监听元素尺寸变化，提高Web应用的性能。赶紧用起来吧！

今天的讲座就到这里，谢谢大家！希望对大家有所帮助。下次有机会再见！

发表回复 取消回复

发表回复取消回复