一、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>
