屏幕缩放事件需节流，因其高频触发易引发重排重绘导致卡顿；推荐使用带首尾触发的节流函数，配合passive和requestanimationframe，并优先采用resizeobserver监听元素尺寸变化。
屏幕缩放（window.resize）事件极易高频触发——浏览器在拖拽窗口边框或双指缩放时，可能每秒触发数十次甚至上百次。若直接在回调中执行 DOM 操作、样式计算或重排相关逻辑，会引发密集的重绘（repaint）与重排（reflow），造成卡顿甚至页面冻结。节流不是“可选优化”，而是必须手段。
为什么 resize 事件特别需要节流
不同于 scroll 或 mousemove，resize 的触发频率受系统 UI 响应机制影响更大：Windows 上拖拽窗口时可能连续触发；移动端双指缩放过程中，浏览器会以接近动画帧率（60fps）频率派发 resize。每次触发若伴随以下任一操作，就会显著加重渲染压力：
- 读取
offsetWidth、clientHeight等布局属性（强制同步回流） - 直接修改
element.style.xxx多个属性（多次重排） - 调用
getComputedStyle()或反复查询 DOM 节点 - 未使用
requestAnimationFrame同步视觉更新
推荐的节流实现方式（带 leading + trailing）
resize 场景下，既要保证缩放开始后尽快响应（如立即调整导航栏高度），也要确保缩放结束时兜底执行一次（如最终适配容器尺寸）。因此建议使用支持首尾双触发的节流函数：
function throttle(func, wait, options = { leading: true, trailing: true }) {
let timeout = null;
let previous = 0;
const { leading, trailing } = options;
<p>return function(...args) {
const now = Date.now();
if (!previous && !leading) previous = now;</p><pre class="brush:php;toolbar:false;">const remaining = wait - (now - previous);
if (remaining wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
func.apply(this, args);
previous = now;
} else if (!timeout && trailing) {
timeout = setTimeout(() => {
func.apply(this, args);
previous = Date.now();
timeout = null;
}, remaining);
}}; }
使用示例：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
const handleResize = throttle(() => {
// ✅ 所有 DOM 查询集中前置
const width = window.innerWidth;
const height = window.innerHeight;
<p>// ✅ 批量写入：用 cssText 或 classList 替代逐个 style 属性赋值
document.body.style.cssText = <code>--vw: ${width}px; --vh: ${height}px;</code>;</p><p>// ✅ 动画类操作优先用 transform/opacity，避免触发布局
const hero = document.querySelector('.hero');
if (hero) {
hero.style.transform = <code>scale(${Math.min(1, width / 768)})</code>;
}
}, 100); // 100ms 是较平衡的延迟，兼顾响应与稳定性</p><p>window.addEventListener('resize', handleResize, { passive: true });</p>
配合 passive 和 requestAnimationFrame 进一步降压
仅靠节流还不够。现代浏览器对未声明 passive: true 的 resize 监听器仍可能施加隐式阻塞（尤其在旧版 Safari 或部分安卓 WebView 中）。同时，视觉更新应尽可能对齐浏览器渲染帧：
-
必须加
{ passive: true }：告诉浏览器该监听器不会调用preventDefault()，允许异步处理 -
视觉变更包裹
requestAnimationFrame：把样式更新延迟到下一帧，避免 layout thrashing - 避免在节流回调内做耗时计算：如复杂布局判断、JSON 解析、大量数组遍历等，应移至 Web Worker 或拆分任务
替代方案：resize-observer 更精准且免节流
如果目标是监听特定元素尺寸变化（而非整个窗口），ResizeObserver 是比 resize 事件更优的选择：
- 它只在被观察元素实际尺寸变化时触发，无虚假调用
- 天然具备防抖特性，内部已做合并与节流
- 不依赖窗口事件，避免全局监听开销
- 支持监听 box-sizing（content-box / border-box）
示例：
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
const { contentRect } = entry;
// ✅ 此处 contentRect 已是稳定快照，无需再读 offsetWidth 等
document.documentElement.style.setProperty('--card-width', `${contentRect.width}px`);
}
});
ro.observe(document.querySelector('.card'));Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
