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