javascript - Chrome 选项卡在前台长时间处于后台后崩溃/挂起

Question

我有一个显示实时统计数据的页面。它运行大量 javascript，发出大量 HTTP 请求，使用 D3.js 每隔几秒渲染一次 SVG 图表，具有大量 CSS 动画，并频繁重新排列 DOM。

只要页面有焦点，就可以流畅运行。如果我切换到另一个选项卡并稍后返回，通常会出现短暂的停顿，页面似乎被卡住，然后 View 突然似乎重新呈现并且页面再次可用。选项卡背景化的时间越长，暂停的时间就越长。如果选项卡在后台运行了很长时间(数小时)并且我切换回它，它会卡住很长时间然后崩溃。

在 Chrome 中观察到所有这些行为。我没有在其他浏览器中测试太多。

当标签页处于后台时，Chrome 没有做什么？当我第一次切换回标签页时，Chrome 正在做什么？

更新:

我也在做一些 jQuery 动画。 This answer和 this one可能是相关的。

根据第一个答案:

"Inactive browser tabs buffer some of the setInterval or setTimeout functions."

stop(true,true) will stop all buffered events and execute immediatly only the last animation.

我在我的代码中添加了对 .stop(true, true) 的调用，至少对于离开选项卡的短途旅行，我没有检测到打嗝。我需要将它在后台放置很长时间并进行测试，然后才能判断它是否产生了显着差异。

Answer 1

我们在 SVG 图形方面遇到了类似的问题，并设法使用随 HTML5 引入的 Page Visibility API 解决了这个问题。如果有人偶然发现此类问题，请参阅以下文章 Using the Page Visibility API

我们设法做到的是在浏览器窗口不可见时暂停所有 SVG 渲染事件。这设法阻止了标签崩溃。