Куча памяти увеличивается, когда вкладка Chrome неактивна

Question

Использование React и HighCharts для создания панели мониторинга, обновляемой каждые 10 секунд с использованием setInterval.

• при активной вкладке браузера проблема с кучей памяти отсутствует.
• при неактивной вкладке браузера происходит постоянное увеличение кучи памяти.
• при открытииРезервное копирование вкладки есть мгновенное падение в куче памяти.

Реальная проблема заключается в том, что мое веб-приложение зависает, если вкладка слишком долго неактивна.

Скриншот кучи памяти:

ОБНОВЛЕНИЕ:

ПохожеВот в чем проблема:

https://developers.google.com/web/updates/2017/03/background_tabs

Chrome не вызывает requestAnimationFrame(), когда вкладка неактивна.

Как люди решают эту проблему?

Answer 1

Если панель не видна, ее не нужно обновлять. Если в chrome возникла эта проблема, я бы рекомендовал просто обновить его один раз, чтобы перефокусировать его после того, как он не активен. И пока он неактивен, просто ничего не делайте каждый цикл в вашем интервале.

var IsFocused = true;
window.onfocus = function() {
    IsFocused = true;
}
window.onblur = function() {
    IsFocused = false;
}

var myinterval = setInterval(function() {

    if(!IsFocused) return;
    some dashboard update code here...

}, 10000);

Теперь, если проблема заключается только в том, что интервал даже работает, когда вкладка неактивна, вы можете просто сделать это тоже:

var myinterval;
function StartInterval() {

    clearInterval(myinterval);
    myinterval = setInterval(function() {

        some dashboard update code here...

   }, 10000);

}
StartInterval(); //Start on first load.
window.onfocus = function() {

    StartInterval();

}
window.onblur = function() {

    clearInterval(myinterval);

}