解决 resize 性能问题

页面因 resize 事件卡顿是常见性能问题，通常由频繁触发重排/重绘或高开销计算导致。以下是 系统化的优化方案，按优先级排序：

---

1. 防抖（Debounce）或节流（Throttle）

方案对比

方案	适用场景	实现方式
防抖	只需在调整结束后执行一次（如保存布局配置）	延迟执行，期间重复触发重置计时器
节流	需要实时响应但降低频率（如自适应布局）	固定间隔执行一次

代码实现

// 防抖方案（推荐默认使用）
function debounce(fn, delay = 200) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

// 节流方案（需连续响应时使用）
function throttle(fn, interval = 100) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, arguments);
      lastTime = now;
    }
  };
}

// 使用示例
window.addEventListener('resize', debounce(() => {
  console.log('处理resize逻辑');
}, 300));

---

2. 避免同步布局抖动（Layout Thrashing）

问题代码示例

// 错误！交替读写样式触发强制重排
function handleResize() {
  const width = element.offsetWidth; // 读 → 触发重排
  element.style.height = `${width}px`; // 写 → 再次重排
}

优化方案

• 批量读写：使用 requestAnimationFrame 集中处理

window.addEventListener('resize', debounce(() => {
  requestAnimationFrame(() => {
    // 所有读操作
    const width = element.offsetWidth;
    const height = anotherElement.offsetHeight;
  
    // 所有写操作
    element.style.height = `${width}px`;
    anotherElement.style.width = `${height}px`;
  });
}, 300));

• FastDOM 库（自动批处理读写）

  import fastdom from 'fastdom';
  fastdom.measure(() => { /* 读操作 */ });
  fastdom.mutate(() => { /* 写操作 */ });

---

3. 减少重绘范围（CSS 优化）

检查高频重绘元素

• 在 DevTools 的 Rendering 面板勾选 Paint flashing，绿色高亮区域即频繁重绘部分

优化策略

1. 隔离重绘层：

   .resize-sensitive-element {
     will-change: transform; /* 创建独立合成层 */
     contain: strict;        /* 限制渲染影响范围 */
   }
2. 用 transform 代替 top/left：

   /* 避免触发重排 */
   .moving-element {
     transform: translateX(100px); /* GPU加速 */
   }

---

4. 完全避免监听 resize

替代方案

• CSS 容器查询（现代浏览器支持）

  @container (min-width: 500px) {
    .element { /* 自适应样式 */ }
  }
• ResizeObserver API（精准监听特定元素变化）

  const observer = new ResizeObserver(entries => {
    for (let entry of entries) {
      // entry.contentRect 获取尺寸变化
    }
  });
  observer.observe(document.getElementById('target'));

---

5. 性能对比验证

1. 优化前录制：

   • DevTools → Performance → 录制 resize 过程
   • 查看 Main 线程任务时长和 FPS

2. 优化后对比：

   • 确认长任务消失，FPS 稳定在 60 左右

---

不同场景的优化选择

场景	推荐方案
复杂布局调整	防抖 + requestAnimationFrame
元素位置/尺寸动画	CSS transform + will-change
动态加载组件（如图表）	ResizeObserver 按需更新
响应式布局（媒体查询替代）	改用 CSS 容器查询

---

通过以上方法，可将 resize 性能开销降低 90%+。如果仍有卡顿，需要检查是否有第三方库在内部监听了 resize（如某些图表库），需同步优化其配置。