如何监听窗口大小变化？

在现代响应式Web开发中，根据浏览器窗口尺寸动态调整布局或行为是常见需求。监听窗口大小变化的核心是使用resize事件，但为了性能和体验，我们通常需要搭配防抖或节流技术。

使用resize事件监听器

最基础的方法是为window对象添加resize事件监听器。当窗口大小被调整时，监听函数会被反复触发。

function handleResize() {
  console.log(`窗口尺寸：${window.innerWidth} x ${window.innerHeight}`);
}
window.addEventListener('resize', handleResize);

这个监听函数会在用户每次拖拽窗口边框时被高频率调用，可能导致性能问题，特别是如果函数内部有复杂的计算或DOM操作。

使用防抖优化性能

为了避免函数被过快执行，我们需要使用防抖技术。防抖确保事件处理函数在事件停止触发一段时间后（例如100毫秒）才执行一次。

function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

const debouncedResize = debounce(handleResize, 100);
window.addEventListener('resize', debouncedResize);

这样，只有在用户停止调整窗口大小100毫秒后，handleResize才会执行一次。这能有效减少不必要的计算和渲染，提升页面流畅度。

使用节流控制执行频率

另一种优化方案是节流。它确保函数在指定的时间间隔内（例如200毫秒）最多执行一次，无论事件触发了多少次。

function throttle(fn, interval) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

const throttledResize = throttle(handleResize, 200);
window.addEventListener('resize', throttledResize);

节流保证了响应的规律性，适合需要在调整过程中持续反馈的场景（如实时更新某个指示器）。

获取尺寸的注意事项

在事件处理函数中，使用window.innerWidth和window.innerHeight可以获取到包含滚动条在内的视口尺寸。如果需要不包含滚动条的尺寸，可以使用document.documentElement.clientWidth和document.documentElement.clientHeight。

function handleResize() {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  // 进行布局调整或条件判断
  if (viewportWidth < 768) {
    console.log('移动端布局');
  }
}

在实际项目中，防抖通常是更好的选择，因为我们通常关心的是调整结束后的最终尺寸，而不是中间过程。务必记住在组件卸载或页面销毁时移除事件监听器，避免内存泄漏。

// 清理
window.removeEventListener('resize', debouncedResize);

通过合理运用resize事件和优化技术，你可以构建出能平滑适应各种屏幕尺寸的响应式界面。