Chrome标签页处于非活动状态时内存堆会增加

Question

使用React和HighCharts构建仪表板，使用setInterval每10秒刷新一次。

• 当浏览器选项卡处于活动状态时，没有内存堆问题。
• 当浏览器选项卡处于非活动状态时，内存堆会不断增加。
• 当打开备份选项卡时，内存堆中会立即掉线。

真正的问题是，当标签长时间处于非活动状态时，我的Web应用程序会冻结。

内存堆的屏幕截图：

更新：

看起来这是问题所在：

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

}