我有一个页面显示实时统计.它运行了大量的
JavaScript,使得很多HTTP请求,使用D3.js每几秒钟呈现SVG图表,具有大量CSS动画,并经常重新排列DOM.
只要页面集中,它运行顺利.如果我切换到另一个选项卡,稍后再回来,通常会有一个短暂的暂停,页面似乎被冻结,在视图突然看起来似乎复活之前,该页面再次可用.标签已经被背景越长,这个暂停的时间越长.如果选项卡已经在后台很长时间(小时),并且我切换到它,它将被冻结很长时间,然后崩溃.
所有这些行为都在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)的调用,至少在短时间内,我没有检测到打嗝.我需要在后台离开很长时间,然后再测试一下,然后才能判断是否有显着差异.
解决方法
我们与SVG图形有类似的问题,并设法使用HTML5引入的页面Visibility API来解决它.如果有人绊倒这个问题,请参考下面的文章
Using the Page Visibility API
我们设法做的是当浏览器窗口不可见时暂停所有SVG渲染活动.这设法阻止该标签崩溃.
