reactjs - 当 Chrome 选项卡处于非活动状态时，内存堆会增加

Question

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

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

真正的问题是，我的Web应用程序会冻结，当TAB不活动时间太长时。

内存堆截图：

更新：

看起来这是问题所在：

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

requestAnimationFrame()当标签不活动时，Chrome不会致电。

人们如何解决这个问题？

标签： reactjsgoogle-chromehighchartstabssetinterval

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

}