我有一个显示实时统计信息的页面。它运行了大量的javascript，发出了大量的HTTP请求，使用D3.js每隔几秒渲染一次SVG图表，拥有大量的CSS动画，并经常重新排列DOM。
只要页面聚焦，它就会顺利运行。如果我切换到另一个选项卡并稍后再回来，通常会暂停一下，在视图突然显示为重新渲染并且页面再次可用之前，页面似乎已冻结。标签背景越长，暂停时间越长。如果标签已经在后台很长时间（小时）并且我切换回它，它将被冻结很长时间然后崩溃。
在Chrome中观察到所有这些行为。我没有在其他浏览器中测试过多。
当标签位于后台时，Chrome不执行什么操作，以及当我第一次切换回标签时，在暂停期间它做了什么？
我也在做一些jQuery动画。 This answer和this one可能相关。
根据第一个答案：
“非活动浏览器选项卡缓冲了一些setInterval或setTimeout函数。”
stop（true，true）将停止所有缓冲的事件，并立即执行最后一个动画。
我在我的代码中添加了对.stop（true，true）的调用，至少对于远离选项卡的短途旅行，我没有发现打嗝。我需要将它留在后台很长一段时间并在我判断它是否有显着差异之前进行测试。
答案 0 :(得分：7)
我们在SVG图上遇到了类似的问题，并设法使用HTML5引入的页面可见性API 来解决它。如果有人遇到此类问题，请参阅以下文章Using the Page Visibility API
我们设法做的是在浏览器窗口不可见时暂停所有SVG渲染活动。这设法阻止了标签崩溃。
答案 1 :(得分：1)
是的，这是Chrome浏览器的典型行为。
我猜，当您的标签位于后台时，Chrome会将所有标签数据放在“后架”上，以清除“前架”，其工作速度更快。我知道，这听起来不专业，但我希望你理解。
我认为在你的情况下很难解决这个问题（因为你在图形中使用了很多操作）..但是这个方法可能会省你（我之前从未测试过）：
每次更新统计信息（或进行一些高负载计算）时，都可以保存时间戳。然后，当您再次更新统计信息时，可以减去新时间戳的旧时间戳。并且，如果您发现时间戳之间的差异非常大，请在下次更新之前使用setTimeout（）函数。也许，它会阻止Chrome的混乱。