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

Question

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

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

真正的问题是当Tab留不当时，我的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);

}