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