必须对 window.resize 事件节流，且需首尾触发；优先用 visualViewport.scale 精准判断缩放，Chrome/Edge/Safari 支持，Firefox 降级；注意清理监听器防泄漏，并拆分首帧与末帧逻辑。
浏览器窗口缩放（包括 Ctrl/Cmd + +/-、滚轮缩放）会高频触发 window.resize 事件，直接响应极易引发重排重绘和卡顿。节流不是可选项，而是必须手段——关键在于既要控制频率，又不能丢失首尾关键状态。
用带首尾触发的节流函数封装 resize 回调
普通节流只保中间间隔，但缩放是连续过程：用户按下快捷键的瞬间需立即响应（如隐藏浮层），松手后的最终比例必须兜底更新（如重设 Canvas 尺寸）。推荐使用支持 leading 和 trailing 的节流实现：
- 首次缩放时立即执行，避免视觉延迟
- 最后一次变化后强制补一次，确保 DOM 状态与真实缩放一致
- 避免用简单时间戳节流（如仅比对
Date.now()），它可能漏掉末次调用
优先结合 visualViewport.scale 做精准缩放判断
resize 事件无法区分「窗口拉伸」和「页面缩放」，而 visualViewport.scale 直接返回当前缩放比例（1.0 = 100%，1.25 = 125%），更可靠：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- Chrome 61+、Edge 79+、Safari 13.1+ 支持；Firefox 暂不支持，需降级回 resize
- 监听
visualviewport事件，对scale变化做节流判断，而非盲目监听 resize - 示例逻辑：当
scale变化超过 ±0.02 时才触发业务处理，过滤微小抖动
注意监听器清理与跨浏览器兼容
缩放相关逻辑常驻页面生命周期，若未及时清理，易造成内存泄漏或重复绑定：
立即学习“Java免费学习笔记（深入）”；
- 使用
addEventListener时，保存 handler 引用，组件卸载或路由跳转前调用removeEventListener - 在 Safari 中，
resize对缩放响应较弱，必须配合visualViewport；旧版 Firefox 则需 fallback 到window.devicePixelRatio辅助判断 - 避免依赖
window.innerWidth或document.body.clientWidth判断缩放——它们在纯缩放下可能不变
实际使用建议
不要把所有缩放响应逻辑塞进一个节流回调里。拆解为轻量、可缓存的操作：
- 首帧立即更新 UI 状态（如切换 class、显示 loading 图标）
- 末帧再执行重计算（如重绘 Canvas、重排 Grid 容器）
- 对字体大小、间距等 CSS 属性，优先用 CSS 自适应方案（如
rem+ 根字体动态调整），减少 JS 干预
