如何避免切换浏览器标签后JavaScript暂停执行？

可以实现。问题出在你用的setInterval上——浏览器为了节省系统资源，会降低后台标签页中定时器的执行频率，导致你的动画和计时在切标签后变慢甚至暂停。

要解决这个问题，不能依赖setInterval的固定执行间隔，而是要基于真实时间差来计算进度：记录动画开始的时间戳，每次更新时计算当前时间与开始时间的差值，再根据这个差值来更新元素宽度和计时显示，这样不管标签页是否在前台，时间都会真实流逝，进度也能准确同步。

修改后的代码如下：

const contagemInicial = document.querySelector('.seconds');
const life = document.querySelector('.life');
// 初始总时长15秒（转为毫秒计算）
const totalDuration = 15 * 1000;
// 记录计时开始的时间戳
let startTime = Date.now();
// 剩余时间初始值
let remainingTime = totalDuration;

function updateProgress() {
    // 计算已流逝的真实时间
    const elapsed = Date.now() - startTime;
    remainingTime = totalDuration - elapsed;

    if (remainingTime <= 0) {
        // 时间耗尽，终止更新
        contagemInicial.textContent = '0:00';
        life.style.width = '0%';
        return;
    }

    // 计算剩余的秒数和百分秒
    const segundos = Math.floor(remainingTime / 1000);
    const centesimos = Math.floor((remainingTime % 1000) / 10);
    // 格式化百分秒为两位数字
    const formattedCentesimos = centesimos < 10 ? `0${centesimos}` : centesimos;

    // 更新页面计时显示
    contagemInicial.textContent = `${segundos}:${formattedCentesimos}`;
    // 按剩余时间比例更新宽度
    const widthPercent = (remainingTime / totalDuration) * 100;
    life.style.width = `${widthPercent}%`;
    
    // 请求下一帧继续更新（浏览器原生API，适配画面刷新节奏）
    requestAnimationFrame(updateProgress);
}

// 启动进度更新
updateProgress();
// 兼容兜底：如果环境不支持requestAnimationFrame，用setInterval替代
// setInterval(updateProgress, 10);

关键改动说明： #

• 用Date.now()获取真实时间戳计算流逝时长，完全摆脱对定时器执行间隔的依赖
• 改用requestAnimationFrame驱动更新，前台时保证画面流畅，后台时即使API执行频率降低，时间差计算依然准确
• 直接基于剩余时间比例计算宽度和显示内容，避免原代码手动递减时间的误差，逻辑更简洁准确

这样修改后，即使切换到其他标签页，计时和宽度变化也会严格按照15秒的设定时长推进，返回原标签页时会直接显示当前正确进度。

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