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

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

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

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

内存堆的屏幕截图：

更新：

看来这就是问题所在：

当选项卡处于非活动状态时，Chrome不会调用

requestAnimationFrame（）

---

人们如何解决这个问题

如果看不到仪表板，实际上不需要更新它。如果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);

}