当 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();