Chrome隐藏标签页时倒计时网站自动暂停问题求助

我开发了一个基于HTML、CSS和JavaScript的基础倒计时网站，默认倒计时为5分钟，输入s可启动或手动设置时长。标签页可见时无论设置多久都能正常运行，但在Chrome浏览器中标签页隐藏时：

• 设置时长小于约6分钟，倒计时正常；
• 设置7分钟及以上且启动后未切换回该标签页，倒计时会自动后台暂停。

尝试在chrome://discards/中关闭该标签页的Auto Discardable但无效，临时解决方法是将网站在新窗口打开并保持窗口活跃。

核心倒计时逻辑代码：

function startCountdown() {
  // console.log(mins);
  // console.log(secs % 60);
  // ? when timer starts we need to show -1 min
  showMins(mins - 1);
  secs = secs - 1;
  // ? shows the seconds
  secsDisplay.textContent = secs % 60;
  // * store mins and secs to the cookie
  setCookie();
  // ? resets the timer if 0 seconds are left
  if (secs === 0) {
    clearInterval(countdown);
    timerTicking.pause();
    timesUp.play();
    resetTimer();
    // ? or min decreases by 1 if seconds is fully divisible by 60
  } else if (secs % 60 === 0) {
    mins = mins - 1;
    showMins(mins);
  }
}

Chrome对后台标签的JavaScript定时器有节流机制，这是浏览器为节省资源的默认优化策略，关闭Auto Discardable仅防止标签被彻底丢弃，无法解除定时器限制。以下是可行的解决方法：

1. 改用时间戳+requestAnimationFrame计算 #

不依赖setInterval的固定间隔，而是记录倒计时的结束时间戳，通过requestAnimationFrame实时计算剩余时间。这种方式基于真实时间差计算，不受后台定时器节流影响：

let endTime;
let animationId;

function startCountdown(targetMinutes) {
  const totalSeconds = targetMinutes * 60;
  endTime = Date.now() + totalSeconds * 1000;
  updateCountdown();
}

function updateCountdown() {
  const remainingMs = endTime - Date.now();
  if (remainingMs <= 0) {
    cancelAnimationFrame(animationId);
    timerTicking.pause();
    timesUp.play();
    resetTimer();
    return;
  }

  const remainingSecs = Math.floor(remainingMs / 1000);
  const mins = Math.floor(remainingSecs / 60);
  const secs = remainingSecs % 60;

  showMins(mins);
  secsDisplay.textContent = secs;
  setCookie(); // 保存剩余时间到Cookie

  animationId = requestAnimationFrame(updateCountdown);
}

2. 使用Web Workers运行倒计时逻辑 #

Web Worker独立于主线程运行，不受标签页可见性影响，可避免浏览器对后台JS的节流：

• 创建countdown-worker.js：

let endTime;
let intervalId;

self.onmessage = function(e) {
  if (e.data.type === 'start') {
    endTime = Date.now() + e.data.totalSeconds * 1000;
    intervalId = setInterval(() => {
      const remainingMs = endTime - Date.now();
      if (remainingMs <= 0) {
        clearInterval(intervalId);
        self.postMessage({ type: 'end' });
        return;
      }
      const remainingSecs = Math.floor(remainingMs / 1000);
      self.postMessage({
        type: 'update',
        mins: Math.floor(remainingSecs / 60),
        secs: remainingSecs % 60
      });
    }, 1000);
  } else if (e.data.type === 'stop') {
    clearInterval(intervalId);
  }
};

• 主线程中调用Worker：

const worker = new Worker('countdown-worker.js');

function startCountdown(mins, secs) {
  const totalSeconds = mins * 60 + secs;
  worker.postMessage({ type: 'start', totalSeconds });
}

worker.onmessage = function(e) {
  if (e.data.type === 'update') {
    showMins(e.data.mins);
    secsDisplay.textContent = e.data.secs;
    setCookie();
  } else if (e.data.type === 'end') {
    timerTicking.pause();
    timesUp.play();
    resetTimer();
  }
};

// 页面卸载时终止Worker
window.addEventListener('beforeunload', () => {
  worker.postMessage({ type: 'stop' });
  worker.terminate();
});

3. 利用Page Visibility API校准（辅助优化） #

在标签页重新可见时，通过时间戳校准倒计时，修正可能的误差：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    // 从Cookie中读取保存的结束时间戳
    const savedEndTime = getCookie('endTime');
    if (savedEndTime) {
      const remainingMs = savedEndTime - Date.now();
      if (remainingMs > 0) {
        const remainingSecs = Math.floor(remainingMs / 1000);
        mins = Math.floor(remainingSecs / 60);
        secs = remainingSecs % 60;
        showMins(mins);
        secsDisplay.textContent = secs;
      }
    }
  }
});

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