今日、私は新しい HTML5 が提供しなければならないもの、特に canvas について知りたがっています。www.html5canvastutorials.com というサイトにたどり着き、いくつかのチュートリアルに従って、さまざまなブラウザーでコードをいじり始めました。次の例にたどり着いたとき、Google chrome に奇妙な点があることに気付きました。http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/
webkitRequestAnimationFrame 関数は、別のタブに移動するときなど、サイトでアクティブでないときに FPS (したがって CPU コスト) を削減するのに役立つはずです。しかし、この例を試してみると、必ずしも満足のいく結果が得られるとは限らないことに気付きました。
- アクティブなウィンドウとしての Google Chrome、現在のタブのサイト: 約 60 FPS を取得します。
- 別のタブのアクティブなウィンドウとしての Google Chrome: 約 1 FPS を取得します。非常に良好です。
- アクティブ ウィンドウとしての Google Chrome、テレビ (セカンド モニターとして使用)、120 FPS、奇妙ですが、不満はありません。
- Google Chrome はアクティブなウィンドウではなく、別のタブで、1 FPS 程度で完璧です。
悪い点: サイトが現在のタブにあり、別のウィンドウが Google Chrome ウィンドウを完全に覆っている場合 (たとえば、最大化されたウィンドウなど)、FPS は約 2500 まで上昇します (その結果、1 つの CPU コアが最大になります)。
Firefox で同じサイトを試してみると、すべて正常に動作します。
このフィドルは、最後の更新以降の平均 FPS を示す例です: http://jsfiddle.net/kmKZa/55/ (チュートリアル サイトからほとんどコードをコピーしました)
誰かアイデアがあれば、これらの恐ろしい CPU スパイクを防ぐ方法を知りたいです。アドバイスをよろしくお願いします！