resize事件应使用节流而非防抖，因其需在调整过程中持续响应（如实时更新图表尺寸），而防抖仅最后执行一次会丢失中间状态；节流可每100ms稳定执行一帧，兼顾响应性与性能。
窗口 resize 事件在拖拽调整浏览器大小时会高频触发，不加控制容易导致重排重绘、布局计算或 API 请求堆积，引发卡顿甚至内存泄漏。节流（throttle）是更合适的选择——它确保函数在固定时间间隔内最多执行一次，兼顾响应性与性能。
为什么 resize 用节流比防抖更合理
resize 不像搜索输入那样“等用户停手再处理”，而是需要在调整过程中保持一定频率的响应（比如实时更新图表尺寸、切换导航栏状态）。防抖只在最后执行一次，可能错过中间关键状态；节流则能稳定输出，例如每 100ms 执行一帧，既不卡顿，也不过载。
手写一个轻量节流函数
基于时间戳判断，简洁可靠：
wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}使用方式：
const handleResize = throttle(() => {
console.log('窗口尺寸：', window.innerWidth, 'x', window.innerHeight);
// 更新图表、适配栅格、重设 canvas 尺寸等
}, 100);
<p>window.addEventListener('resize', handleResize);实际项目中的关键注意点
- 延迟值选 100–16ms 之间较稳妥：100ms 感知不明显且压力小；16ms 接近 60fps，适合动画级响应
- 务必在页面卸载前移除监听，避免内存泄漏：
window.removeEventListener('resize', handleResize) - 如果需兼容旧版 Safari 或 iOS WebKit，可补充
window.orientationchange监听，因为某些设备旋转时不触发 resize - 对纯 CSS 响应式布局无 JS 依赖的场景，可减少 JS 节流逻辑，优先用
matchMedia监听断点变化，更精准也更轻量
现代替代方案：matchMedia + resize 节流组合
真正需要 JS 响应的，往往不是所有尺寸变化，而是特定断点（如从桌面切到移动端）。推荐组合使用：
- 用
matchMedia('(max-width: 768px)')精准监听断点切换 - 用节流包裹 resize 处理器，仅用于非断点类的连续尺寸计算（如 canvas 缩放比例）
- 初始化时立即检查一次媒体查询状态，避免首次加载遗漏
