11

リアルタイムの統計を表示するページがあります。多くの JavaScript を実行し、多くの HTTP リクエストを作成し、D3.js を使用して数秒ごとに SVG チャートをレンダリングし、多くの CSS アニメーションを使用し、DOM を頻繁に再配置します。

ページがフォーカスされている限り、スムーズに実行されます。別のタブに切り替えて後で戻ると、ビューが突然再レンダリングされてページが再び使用可能になる前に、ページがフリーズしたように見える短い一時停止がしばしばあります。タブがバックグラウンド化されている時間が長いほど、この一時停止は長くなります。タブが非常に長い時間 (数時間) バックグラウンドにあり、再び切り替えると、長時間フリーズしてからクラッシュします。

これらの動作はすべて Chrome で観察されます。他のブラウザではあまりテストしていません。

タブがバックグラウンドにある間、Chrome は何をしていませんか? また、最初にタブに戻ったときの一時停止中に Chrome は何をしていますか?

アップデート：

また、jQuery のアニメーション化も行っています。この回答 とこれが関連している可能性があります。

その最初の答えによると：

「非アクティブなブラウザ タブは、setInterval または setTimeout 関数の一部をバッファリングします。」

stop(true,true) は、バッファリングされたすべてのイベントを停止し、最後のアニメーションのみをすぐに実行します。

コードに .stop(true, true) への呼び出しを追加しましたが、少なくともタブから離れた短い旅行では、しゃっくりを検出していません。長い間バックグラウンドに置いておき、大きな違いがあるかどうかを判断する前にテストする必要があります.

4

2 に答える 2

8

SVG グラフにも同様の問題があり、HTML5 で導入されたPage Visibility APIを使用して解決しました。このような問題に遭遇した場合は、次の記事を参照してください。ページの可視性 API の使用

ブラウザー ウィンドウが表示されていないときに、すべての SVG レンダリング アクティビティを一時停止することができました。これにより、タブがクラッシュするのを防ぐことができました。

于 2015-02-17T14:08:57.567 に答える
1

はい、これは Chrome ブラウザの典型的な動作です。

タブがバックグラウンドにある間、Chrome はすべてのタブ データを「バック シェルフ」に配置して、はるかに高速に動作する「フロント シェルフ」をクリアしていると思います。専門外に聞こえるかもしれませんが、ご理解いただければ幸いです。

あなたのケースでこの問題を解決するのは非常に難しいと思います（グラフィックで多くの操作を使用しているため）..しかし、おそらくこの方法はあなたを救うでしょう（私は以前にテストしたことがありませんでした）：

統計を更新する (または高負荷の計算を行う) たびに、タイムスタンプを保存できます。次に、統計を再度更新するときに、新しいタイムスタンプから古いタイムスタンプを差し引くことができます。また、タイムスタンプの差が非常に大きい場合は、次の更新の前に setTimeout() 関数を使用してください。たぶん、Chrome のキャッシュを防ぐことができます。

于 2012-11-29T18:19:13.267 に答える