Оптимизация таймеров для современных браузеров (Chrome) в Javascript

Question

Я написал веб-приложение, которое сильно зависит от таймеров, работающих в фоновых вкладках.В более поздних браузерах 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);

Часто этот таймер сильно нарушается браузером и длится примерно на 50% дольше, чем параметр seconds, указанный в качестве ввода,Я также минимизировал 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);

• Не обновлять графический интерфейсесли вкладка находится в фоновом режиме.Посмотрите на пример: https://developers.google.com/web/updates/2017/03/background_tabs

После применения этого кода обновления GUI могут быть заключены в if (doVisualUpdates)