Question

我编写了一个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秒）-似乎很复杂！

预先感谢

Answer 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)

中

使用Javascript优化现代浏览器（Chrome）的计时器

1 个答案: