在 Javascript 中优化现代浏览器 (Chrome) 的计时器答案

【问题标题】：Optimising timers for modern browsers (Chrome) in Javascript在 Javascript 中优化现代浏览器 (Chrome) 的计时器
【发布时间】：2019-04-23 19:59:28
【问题描述】：

我编写了一个 Web 应用程序，它严重依赖在后台选项卡中运行的计时器。对于较新的 Chrome 浏览器 (>Chrome 57)，默认选项是“昂贵的”计时器在后台被限制 - 我知道可以在 chrome://flags/ 中禁用此功能，但我想避免要求用户这样做。计时器的一个例子是，它使用 JQuery/JS 并且每秒刷新一次：

function startTimer(seconds) {
  var timer = seconds - 1;
  var refresh = setInterval(function() { // refresh every second
    var output = displaySeconds(timer); // displaySeconds formats the time
    $("#timer").text(output);
    $("title").html(output + " - Timer");
    if (--timer < 0) {
      clearInterval(refresh); // exit refresh loop
    };
  }, 1000);

此计时器通常会被浏览器严重干扰，并且持续时间比作为输入给出的seconds 参数长约 50%。我还缩小了 JS，但请理解这只会真正减小文件的大小，因此无济于事。

什么是合理且与浏览器无关的优化方法以在后台顺利运行？

我的想法： - 使用一些相关库找出选项卡何时在后台，将刷新率降低到更粗略的值（2 或 3 秒） - 不过看起来很复杂！

提前致谢

【问题讨论】：

我不会说这是特定于 Chrome 的问题；众所周知，JS 中的计时器是不可靠的，只是它们中的大多数都足够短，以至于您不会注意到。这个逻辑的具体目的是什么？如果可能的话，可能值得寻找替代方案。
为什么提高刷新率会起作用？这已经是浏览器所做的，所以看起来 you 更改它不会影响任何事情。除非您的逻辑与更新间隔相关，在这种情况下，您最好只测量每次滴答之间的时间，然后将其用于计算。
我希望计时器（比如 15 分钟或 900 秒）倒计时并且在浏览器选项卡中对用户可见。我的想法是将 900 秒分解为 300 次刷新，并且每 3 秒只更新一次选项卡会更有效。还要注意编辑，我是英国人，所以不会用 z 进行拼写优化 :)

标签： javascript jquery google-chrome timer cross-browser

【解决方案1】：

两个建议（大部分符合您自己的解决方案）：

使计时器依赖于开始时间。这样，您就不会依赖计时器触发的确切时间：

（未经测试）

function startTimer(seconds) {
    var endTime = new Date().valueOf() + seconds * 1000;
    var refresh = setInterval(function() { // refresh every second
    var now = new Date().valueOf(); // current time in ms
    var output = displaySeconds((endTime - now) / 1000); // displaySeconds formats the time
    $("#timer").text(output);
    $("title").html(output + " - Timer");
    if (now > endTime) {
      clearInterval(refresh); // exit refresh loop
    };
  }, 1000);

如果选项卡在后台，请不要更新 GUI。请看以下示例： https://developers.google.com/web/updates/2017/03/background_tabs

应用该代码后，可以将 GUI 更新包装在 if (doVisualUpdates) 中

【讨论】：