Web监听尺寸变化的2种方式

发表于 | 分类于
Web监听尺寸变化的2种方式

前言

ResizeObserver 和 resize 事件是两种用于处理元素或窗口大小变化的机制，但它们有不同的使用场景和优缺点。

resize 事件

用途

  • 监听浏览器窗口的大小变化。

使用方式

  • 使用 window.addEventListener('resize', callback) 来添加监听器。
  • resize 事件是对整个窗口的响应，适用于当窗口大小变化时需要执行某些操作的情况。

示例

这里加入了防抖机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
</head>
<style>
html {font-size: 10px}

body {
  font-size: 1.4rem;
}
</style>
<script>
// 防抖
function debounce(fn, wait) {
  let timeout = null
  return function() {
    if(timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait);
  }
}
// 计算
function resize(){
  const mHtml = document.documentElement;
  const width = mHtml.clientWidth;
  // 假如设计图的宽度是400
  mHtml.style.fontSize = 10 * (width / 400) + "px";
}
resize();
window.addEventListener('resize', debounce(resize, 100))
</script>

优缺点

优点

  • 简单易用，直接监听窗口大小变化。
  • 适用于全局窗口的大小变化处理。

缺点

  • 无法直接监听具体元素的大小变化。
  • 可能会因为频繁触发而导致性能问题，特别是在调整窗口大小时。

ResizeObserver

用途

  • 监听 DOM 元素的尺寸变化（例如，宽度和高度）。

使用方式

  • 创建 ResizeObserver 实例并传入回调函数来处理元素大小的变化。
  • 可以观察一个或多个 DOM 元素。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建 ResizeObserver 实例
const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
        console.log('元素尺寸变化！', entry.contentRect);
    }
});

// 选择需要观察的元素
const element = document.querySelector('.myElement');

// 开始观察
observer.observe(element);

// 停止观察
// observer.unobserve(element);

// 断开所有观察
// observer.disconnect();

示例2

1
2
3
4
5
6
document.addEventListener('ready', () => {
  const resizeObserver = new ResizeObserver(() => {
    document.getElementById('mse').style.height = document.body.clientHeight + 'px'
  })
  resizeObserver.observe(document.body)
})

优缺点

优点

  • 可以直接监听具体元素的尺寸变化，而不仅仅是窗口的变化。
  • 更加细粒度，能够处理多个元素的尺寸变化。
  • 性能优化更好，因为 ResizeObserver 会聚合尺寸变化并异步通知回调。

缺点

  • 可能对某些旧版浏览器不兼容（需要进行兼容性检查）。
  • 需要额外的代码来处理多个元素的观察和停止观察等操作。

总结

  • resize 事件 适用于全局窗口尺寸的变化处理。
  • ResizeObserver 适用于监控 DOM 元素的尺寸变化，提供了更精细的控制和性能优化。

选择哪种方式取决于你的需求。

如果你需要处理整个窗口的变化，可以使用 resize 事件；

如果你需要更细粒度的尺寸变化监控，ResizeObserver 是更合适的选择。