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

}