edge 浏览器保持 setTimeout/setInterval 不被冷却暂停的方法

目录
[隐藏]

当 edge 浏览器进入后台时,其网页中的 setTimeout 定时器可能会因为性能优化策略而被冷却暂停,直至页面再次恢复焦点。
我们有两种办法可以避免这种现象的发生。

方法一:关闭 edge 效率模式

在 edge 浏览器中按快捷键 Alt + F,选择 设置 -> 系统和性能 -> 性能优化。也可以直接在地址栏中输入地址 edge://settings/system 然后回车直接进入设置页面。

然后在页面中关闭其中的 效率模式使用标签页休眠功能节约资源 的开关。不过对于笔记本来说,效率模式有助于节省电量消耗,可以视情况决定是否需要关闭该功能。

方法二:启动并循环播放音频文件

由于方法一需要用户操作,是不可控的。对于开发同学来说,可以在定时器启动的同时,启动一个循环播放的音频文件。在 PC 版的 edge 浏览器上不会冻结音视频的播放页面(不适用于移动版)。

具体实现示例:

function audioLoop() {
    const c3 = document.createElement("audio");
    c3.src = "data:audio/mp3;base64,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";
    c3.volume = 0.002;
    // 有些浏览器很严格, 需要设一个极小的音量, 或换一个没有声音的音频文件
    c3.loop = true;
    c3.play();
}

audioLoop();
setInterval(() => console.log(new Date()), 1000);

需要注意的是:

  • 循环播放的音频文件,需要一个较小的音量值,否则不会被浏览器识别到
  • 音频播放的启动依赖于用户操作行为启动,可以在用户触发某点击行为时启动

方法三:创建不可见的循环视频播放

function isMobile() {
    return navigator.userAgentData?.mobile || /Mobi|Android|iPhone/i.test(navigator.userAgent);
}
function videoLoop() {
    const chromeVersion = /Chrome\/([0-9.]+)/.exec(navigator.userAgent)?.[1]?.split('.')[0];

    if (chromeVersion && parseInt(chromeVersion, 10) >= 88 && !isMobile()) {
        const videoDom = document.createElement('video');
        const hiddenCanvas = document.createElement('canvas');

        videoDom.setAttribute('style', 'display:none');
        videoDom.setAttribute('muted', '');
        videoDom.muted = true;
        videoDom.setAttribute('autoplay', '');
        videoDom.autoplay = true;
        videoDom.setAttribute('playsinline', '');
        hiddenCanvas.setAttribute('style', 'display:none');
        hiddenCanvas.setAttribute('width', '1');
        hiddenCanvas.setAttribute('height', '1');
        hiddenCanvas.getContext('2d')?.fillRect(0, 0, 1, 1);
        videoDom.srcObject = hiddenCanvas?.captureStream();
    }
}
videoLoop();
setInterval(() => console.log(new Date()), 1000);

方法三:使用 Web Worker 运行

浏览器处于性能优化考虑,会暂停处于后台的标签页面,但在 Web Worker 中的进程实测不会受到影响。我们可以将定时器的逻辑放到 Web Worker 中执行。示例:

function init() {
    const blob = new Blob([`(function(e){setInterval(function(){this.postMessage(null)},1000)})()`]);
    const url  = window.URL.createObjectURL(blob);
    const work = new Worker(url);
    work.onmessage = () => {
        console.log(new Date());
    }
}

init();

扩展参考

点赞 (0)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code