Resize Observer监听尺寸变化，告别定时器！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》Resize Observer监听尺寸变化告别定时器目录Resize Observer监听尺寸变化告别定时器以前写前端监听元素尺寸变化我总用setInterval。一开定时器页面就卡成PPT。调整窗口大小CPU飙到100%用户骂娘骂得比我的代码还响。问题在哪定时器是轮询。浏览器没主动说“尺寸变了”我只能硬问“嘿变没”问得勤卡得狠。比如100ms问一次用户拖动窗口时触发几十次CPU直接干烧。核心根源浏览器原生没提供尺寸变化事件。只能靠定时器轮询本质是无效劳动。浏览器渲染引擎知道尺寸变了但懒得主动通知你。解决方案用ResizeObserver。浏览器原生支持现代浏览器都行尺寸一变自动触发不用你操心。对比代码旧方法定时器轮询性能差易漏触发// 旧方法定时器轮询别用constelementdocument.getElementById(container);letlastWidth0;functioncheckSize(){constwidthelement.clientWidth;if(width!lastWidth){lastWidthwidth;console.log(尺寸变了,width);// 业务逻辑}}// 每100ms问一次CPU直接爆炸setInterval(checkSize,100);新方法ResizeObserver真香// 新方法ResizeObserver推荐constelementdocument.getElementById(container);// 创建观察器constobservernewResizeObserver(entries{for(constentryofentries){const{width,height}entry.contentRect;console.log(尺寸变了,width,height);// 业务逻辑// 这里直接用新尺寸不用对比}});// 开始观察observer.observe(element);// 用完记得关避免内存泄漏// observer.unobserve(element);避坑总结兼容性IE和旧版Chrome不支持。→ 解决加个polyfill库resize-observer-polyfill一行代码搞定。importresize-observer-polyfill;移除观察别忘了unobserve。→ 例子组件销毁时调用observer.unobserve(element)。→ 不关内存泄漏用户一刷新页面就卡死。初始触发ResizeObserver会在初始化时触发一次。→ 别漏处理业务逻辑里要处理初始尺寸。多个元素能同时观察多个元素。→ 传数组就行observer.observe([el1, el2])。用上ResizeObserver后CPU从100%掉到5%。用户拖动窗口像在滑冰流畅得飞起。以前写定时器像在用老式收音机调频——一调就卡。现在用ResizeObserver像用蓝牙耳机清晰又安静。别再用定时器了。真香。