Chrome扩展独立窗口高度平滑调整优化方案咨询

背景信息 #

• 开发的Chrome扩展支持两种启动方式：默认popup.html弹窗，或通过window.open分离为独立窗口
• 同样适用于通过Chrome快捷方式（"..." > "更多工具" > "创建快捷方式"）打开的场景

问题描述 #

需要实现：当用户以独立窗口/快捷方式打开扩展时，切换不同选项时窗口高度平滑调整。目前实现存在以下问题：

• 动画卡顿，最终高度不一致
• 有时需点击两次按钮才生效，单次点击无反应
• 切换时窗口底部边缘的文本会抖动
• 调试时浏览器偶尔崩溃，存在性能问题

现有实现代码 #

（strWdif和strHdif用于弥补CSS尺寸偏差，该问题暂未解决）

const popup = window;

function resizeWindow(popup) {
  setTimeout(function () {
  var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
  var strW2 = strW.slice(0, -2);
  var strWdif = 32;
  var bodyTargetWidth = (parseFloat(strW2) + parseFloat(strWdif));
  var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
  var strH2 = strH.slice(0, -2);
  var strHdif = 54;
  var bodyTargetHeight = (parseFloat(parseInt(strH2)) + parseFloat(strHdif));
  var height = window.innerHeight;

  console.log("Window Height: ", height, "CSS Height: ", bodyTargetHeight);

  var timer = setInterval(function () {
    if (height < bodyTargetHeight) {
      popup.resizeTo(bodyTargetWidth, height += 5);
      if (height >= bodyTargetHeight) {
        clearInterval(timer);
      }
      } else if (height > bodyTargetHeight) {
        popup.resizeTo(bodyTargetWidth, height -= 5);
        if (height <= bodyTargetHeight) {
          clearInterval(timer);
        }
      } else {
        clearInterval(timer);
      }
    }, 0);
  }, 400);
}

核心疑问 #

有没有办法让调整过程更流畅，消除抖动和卡顿？

• 猜测问题可能出在每次增减5像素，但这个速度是需求；如果改成每次增减1像素、提高触发频率，会不会解决抖动问题？

补充方案（使用resizeBy） #

该方案平滑度稍好，但无法停在目标高度，无法区分上下调整，偶尔导致浏览器崩溃：

function animateClose(time) {
  setTimeout(function () {
  var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
  var strW2 = strW.slice(0, -2);
  var strWdif = 32;
  var bodyTargetWidth = (parseFloat(strW2) + parseFloat(strWdif));
  var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
  var strH2 = strH.slice(0, -2);
  var strHdif = 54;
  var bodyTargetHeight = (parseFloat(parseInt(strH2)) + parseFloat(strHdif));

  var w = window.innerWidth; //Get window width
  var h = window.innerHeight; //Get window height

  var loops = time * 0.1; //Get nb of loops

  var widthPercentageMinus = (w / loops) * -0;
  var heightPercentageMinus = (h / loops) * -1;
  var widthPercentagePlus = (w / loops) * +0;
  var heightPercentagePlus = (h / loops) * +1;

  console.log("Window Height: ", h, "CSS Height: ", bodyTargetHeight);

  var loopInterval = setInterval(function () {
    if (h > bodyTargetHeight) {
      window.resizeBy(widthPercentageMinus, heightDecrheightPercentageMinuseasePercentageMinus);
    } else if (h < bodyTargetHeight) {
      window.resizeBy(widthPercentagePlus, heightPercentagePlus);
    } else {
      clearInterval(loopInterval);
    }
  }, 1);
}, 400);
}

解决方案 #

1. 核心优化思路

• 用requestAnimationFrame替代setInterval：与浏览器渲染周期同步，彻底解决卡顿问题
• 精确计算每帧增量：根据目标时长分配每帧高度变化，避免固定步长的跳变
• 简化尺寸获取逻辑：直接用offsetHeight/offsetWidth获取元素尺寸，避免字符串解析的误差
• 添加缓动效果：让动画启动/结束更自然，减少视觉抖动

优化后的代码示例

const popup = window;

function smoothResizeWindow(targetDuration = 300) {
  // 延迟执行确保DOM尺寸更新完成
  setTimeout(() => {
    const bodyEl = document.querySelector(".body_zero");
    // 直接获取元素尺寸，替代字符串解析
    const bodyTargetWidth = bodyEl.offsetWidth + 32; // 对应原strWdif=32
    const bodyTargetHeight = bodyEl.offsetHeight + 54; // 对应原strHdif=54
    const currentHeight = popup.innerHeight;
    const totalDelta = bodyTargetHeight - currentHeight;

    // 无尺寸变化时直接返回
    if (Math.abs(totalDelta) < 1) return;

    let startTime = null;

    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      // 计算动画进度（0-1）
      const progress = Math.min((timestamp - startTime) / targetDuration, 1);
      // 缓动函数：ease-in-out，让动画更自然
      const easedProgress = progress < 0.5 
        ? 2 * progress * progress 
        : 1 - Math.pow(-2 * progress + 2, 2) / 2;
      // 计算当前帧的目标高度
      const newHeight = currentHeight + totalDelta * easedProgress;
      // 更新窗口尺寸
      popup.resizeTo(bodyTargetWidth, Math.round(newHeight));

      // 未完成则继续下一帧
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        // 最后一帧强制设置目标高度，消除累积误差
        popup.resizeTo(bodyTargetWidth, bodyTargetHeight);
      }
    }

    requestAnimationFrame(animate);
  }, 400);
}

额外注意事项

• 添加防抖逻辑：避免用户快速切换选项时触发多次动画
• 处理窗口最小尺寸限制：Chrome对窗口最小尺寸有要求，需确保目标高度不低于浏览器允许的最小值
• 调试时关闭其他资源占用高的扩展：减少浏览器崩溃概率

内容的提问来源于stack exchange，提问作者Verminous