「Javascript高性能動画とページレンダリング」ノート

前書き:久しぶりにgmailのメールを見ました.昼休みに開けてみました.InfoQのオススメの「Javascript高性能アニメーションとページレンダリング」という文章を見て、ざっと読んでみました.とてもよかったです.詳しく話しています.細かいところまでよく話しています.分かりやすいです.そ…ノート誕生
1、fps-frame per secondフレーム
ページはフレームごとの変化がシステムで作成されます(GPUまたはCPU).しかし、このような描画はPCゲームの描画とは違って、最高の描画周波数はディスプレイのリフレッシュ周波数(グラフィックカードではなく)に制限されているので、ほとんどの場合、最高の描画周波数は毎秒60フレーム(frame per second、以下fpsで略称する)で、ディスプレイの60 Hzに対応する.
2、60 Hzと60 fpsは何の関係がありますか?
何の関係もない.fpsはGPUレンダリング画面の周波数を表し、Hzはディスプレイリフレッシュ画面の周波数を表している.この静止画のfpsは0フレーム/秒と言ってもいいですが、この時の画面のリフレッシュ率は0 Hzとは絶対に言えません.つまり、画像の内容によって更新率は変化しません.ゲームでもブラウザでも、フレームダウンについて話します.GPUレンダリング画面の周波数が低下することです.たとえば、30 fpsや20 fpsに転落したとしても、視覚の原理のために、私たちが見ている画面は相変わらず動きと一貫しています.
3、なぜsetTimeoutまたはsetIntervalが描画ページを制御するのかに問題がありますか?
まずTimer計算の遅延の精度が足りない.遅延の計算は、ブラウザの内蔵クロックに依存し、クロックの精度は、クロック更新の周波数に依存する.
IE 8およびそれ以前のIEバージョンの更新間隔は15.6ミリ秒である.設定されたsetTimeoutが16.7 msに遅延したとすると、2つの15.6ミリ秒を更新しなければならない.これはまた、理由なしに15.6 x 2−16.7＝14.5ミリ秒の遅延を意味する.
             16.7 ms
DELAY:|----------|
CLOCK:|------|--------|
15.6 ms  15.6 ms
したがって、セットTimeoutに設定した遅延が0 msであっても、すぐにトリガしません.現在ChromeとIE 9+ブラウザの更新頻度はいずれも4 ms(ノートパソコンを使っている場合、電源ではなくバッテリーを使うモードで、リソースを節約するために、ブラウザは更新頻度をシステム時間と同じに切り替えることができ、更新頻度がより低いことを意味する)です.
一歩譲って、もしtimer resolutionが16.7 msに達することができたら、それはまだ非同期の行列の問題に直面しなければなりません.非同期の関係でsetTimeoutのコールバック関数はすぐに実行されるのではなく、待ち行列に参加する必要があるからです.しかし問題は、遅延トリガを待つ間に、新しい同期スクリプトが実行される必要がある場合、同期スクリプトは、timerのフィードバックの後に配置されず、直ちに実行されることである.
もう一歩引いて言えば、timer resolutionが16.7 msに達すると仮定して、非同期関数が遅延されないと仮定して、timerを使ってコントロールしたアニメーションはやはり満足できないところがあります.垂直同期問題