别再给 resize 加防抖了，浏览器本来就在盯着它
来源：dev.to — 2026-09-17
📋 概述
一个在 900px 断点下闪烁的侧边栏：问题不在 CSS，而在用 JS 监听 resize 并比较 window.innerWidth 的代码。resize 在拖动瞬间每秒能触发 60 次以上，滚动条出现还会让宽度差 15px 在边界上误判；加防抖只是延后判断，并没有修掉「用像素值重建媒体查询」这个根因。正确做法是 matchMedia——它监听状态变化，只在跨过断点时通知一次。
🔑 核心要点
- resize 关注的是移动，你的逻辑只关心状态，两者之间的每次回调都是浪费。
- 魔法数字 900 会和样式表里的断点漂移，改了 CSS 却忘了这里就会错上好几个月。
- matchMedia 的 change 事件天然只在翻转时触发，一次而不是几十次。
- 它还能响应 prefers-color-scheme、reduced-motion 这类 resize 永远看不到的变化。
💡 金句
这个 bug 不在于防抖的延时，而在于你在 JS 里笨拙地重建了一个媒体查询，而浏览器本来就有原生的方式问同一个问题。
👍 0
👎 0
← 返回 dev.to 首页