1

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

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

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

最初にタブに戻ったとき、その一時停止中に Chrome は何をしているのですか?

4

1 に答える 1

2

setIntervalまたは一連の を実行していますsetTimeout。
それぞれがキューに入れられ、関数で指定したポイントの後に実行されます。

Google は、あなたのページのすべてを 1 秒ごとに数回の更新に絞り込みます... ...物事を動かしたり 30fps などでアニメーション化するようにタイマーを設定した場合、Google は更新を 1 回実行します (スケジュールしたものは何でも）、間違いなく別の更新を要求する何かを呼び出し、別の更新を要求します...

...元に戻すと、数百 (または数万) のこれらの更新が発生するのを待っていて、30 fps で発生する代わりに、これらのものがたくさん待っています... それらはすべて過ぎてしまいました「次まで実行しないでください...」時間であり、タイマーが再び現在の場所に追いつくまで、物理的に可能な限り速く更新しようとします。

ブラウザーが page-visibility API のコンポーネントをサポートしている場合は、ページが表示されていないときに呼び出しを一時停止します。

if (!document.hidden) { doStuff(); }

また

document.addEventListener("visibilitychange", function (evt) {
    if (evt.visibilityState === "hidden") { myApp.pause(); }
    else if (evt.visibilityState === "visible") { myApp.resume(); }
});

API をサポートしていない場合は、 などを使用してポリフィルを試すことができwindow.onblurます。
とはいえ、ブラウザがページ可視性 API をサポートしていない場合、ページ コードのハードコア スロットリングも行わない可能性があります。
これは 100% の保証ではなく、ある程度の可能性です。

于 2012-11-16T01:38:10.483 に答える