11

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

只要页面有焦点，它就可以顺利运行。如果我切换到另一个选项卡并稍后返回，通常会出现短暂的停顿，页面似乎被冻结，然后视图突然似乎重新呈现并且页面再次可用。选项卡的背景时间越长，此暂停的时间就越长。如果选项卡已经在后台很长时间（几个小时）并且我切换回它，它将被冻结很长时间然后崩溃。

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

选项卡在后台时 Chrome 没有做什么，当我第一次切换回选项卡时它在暂停期间做什么？

更新：

我也在做一些 jQuery 动画。这个答案 和这个答案可能是相关的。

根据第一个答案：

“非活动浏览器选项卡缓冲了一些 setInterval 或 setTimeout 函数。”

stop(true,true) 将停止所有缓冲事件并立即执行最后一个动画。

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

4

2 回答 2

8

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

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

于 2015-02-17T14:08:57.567 回答
1

是的，这是 Chrome 浏览器的典型行为。

我猜当您的标签在后台时，Chrome 会将所有标签数据放在“后架”上，以清除运行速度更快的“前架”。我知道，这听起来不专业，但我希望你能理解。

我认为在你的情况下很难解决这个问题（因为你对图形使用了很多操作）..但也许这种方法会拯救你（我以前从未测试过）：

每次更新统计信息（或进行一些高负载计算）时，您都可以保存时间戳。然后，当您再次更新统计信息时，您可以减去新时间戳的旧时间戳。而且，如果您发现时间戳之间的差异非常大，请在下次更新之前使用 setTimeout() 函数。也许，它会阻止 Chrome 的 chash。

于 2012-11-29T18:19:13.267 回答