在非活动选项卡中运行时，Chrome v54 中的 Web Worker 运行速度要慢两倍

Question

我有一个使用 setTimeout 播放带有淡入/淡出过渡的音频的 web 应用。众所周知，chrome 和其他浏览器在非活动（或后台）选项卡中运行时会限制 setTimeout 的执行。所以为了解决这个问题，我使用这个脚本 (https://github.com/turuslan/HackTimer) 来修补 Timer API 以使用 Web Worker。这允许音量衰减过渡在后台运行，以便无论选项卡是否处于活动状态，它们都将始终同时执行和完成。这曾经在 chrome 中运行良好，但现在我注意到在 chrome 的 54 版（可能还有更早的版本）中，在非活动选项卡中运行时，Web Worker 的执行速度要慢两倍。这个问题不会发生，并且与 FireFox 甚至 IE11 完美配合！

这是一个 chrome 错误吗？或者它是预期的行为？是否有另一个 解决此问题的方法？我不想要求在单独的窗口中打开 webapp，所以这不是一个选项。

这是一个演示： https://jsfiddle.net/2614xsj8/1/

// Open Chrome console and run this then wait a few seconds to see
// it is executing on time. Then open or switch to a new tab and wait
// a few seconds. Come back to see how much slower the setTimeout
// function was being called even when using HackTimer which patches
// the Timer API to use Web Workers

var rate = 1000;
var start = new Date().getTime();
var func = function() {
  var now = new Date().getTime();
  var time = now - start;
  var status = Math.abs(rate - time) <= 50 ? "on time" : (time / rate) + " times slower";
  console.log("executed in [" + time + "] milliseconds. " + status);
  start = now;
  setTimeout(func, rate);
};
setTimeout(func, rate);

<script src="https://cdn.rawgit.com/turuslan/HackTimer/master/HackTimer.js" type="text/javascript"></script>

Answer 1

使用Task Scheduler 是最好的方法，那么您实际上不是超时或间隔，而是特定日期

但这需要使用服务工作者来代替......这很糟糕。因为那么您的站点也需要被列入白名单才能运行服务人员（因此您的站点需要有效的 SSL 证书）

// https://example.com/serviceworker.js
this.ontask = function(task) {
    alert(task.data.message);
    console.log("Task scheduled at: " + new Date(task.time));
    // From here on we can write the data to IndexedDB, send it to any open windows,
    // display a notification, etc.
}

// https://example.com/webapp.js
function onTaskAdded(task) {
    console.log("Task successfully scheduled.");
}

function onError(error) {
    alert("Sorry, couldn't set the alarm: " + error);
}

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.taskScheduler.add(Date.now() + (10 * 60000), {
        message: "It's been 10 minutes, your soup is ready!"
    }).then(onTaskAdded, onError);
});