回答:
残念ながら、答えは描画量を減らすことです。キャンバスベースのアプリケーション（実際、どのプラットフォームでも）のボトルネックは、実際にピクセルを描画するのにかかる時間であることがわかりました。
試してみることがいくつかあります。
複数のキャンバスレイヤーを使用します。オブジェクトを別のレイヤー（絶対に背景レイヤーの上に配置）に描画しながら、1つのレイヤーに背景を描画します。（注：モバイルサファリではこれを試していませんが、他のプラットフォームでは役立ちます）
変更されたスプライトのみを再描画します。これには注意が必要ですが、間違いなくパフォーマンスが向上します。アイデアは、スプライトを再描画する必要があるかどうかを保存し、スプライトを必要とするスプライトとその背後の背景のみを再描画することです。（これは、スプライトが重複している可能性がある他のオブジェクトにカスケードする必要もあります。）
Chromeでの開発で重要なのは、a）JavaScriptエンジン（V8）が非常に高速であり、b）最新バージョン（7,8,9）がすべてキャンバスレンダリングに関してGPUアクセラレーションを備えていることです。それは、モバイルハードウェアがデスクトップ/ラップトップほど強力ではないという事実と相まって、モバイルサファリで同じパフォーマンスに近い場所に到達することは本当に難しいことを意味します。
とりあえず、最善のアプローチは、最初からゲームをモバイルサファリでターゲットにし、再描画がそれほど集中しないゲームを作成してみることだと思います。
これは少し長いショットですが、CSS変換を使用してDIVスプライトでゲームを操作できますか？これは、CSS変換および遷移を使用してiOSデバイス上で物事を動かすことで素晴らしいパフォーマンスを得ているためです。
これらは適切にハードウェアアクセラレーションされているように見えますが、加速のために変換（つまり、translate3Dではなく）に3Dフォームを使用しなければならないという奇妙な注意事項があります。 16要素の浮動小数点行列を直接設定するだけのフォームです。これは私にとって非常に便利です。
私はこのように書かれたシンプルなゲームプロジェクトを試してみることを意味してきたので、それが結果としてどれだけスムーズになっているかにとても感銘を受けました。
線の描画の場合、ストロークを呼び出す前に、できるだけ多くのlineToコマンドを組み合わせます。
これとその他のヒント：http : //dt.deviantart.com/blog/38471599/
古いスレッドに答えを追加したくないのですが、誰もこれに言及していないことに驚いています。
最初のゲームを作成するときは、パフォーマンスを賢明に動作させると期待する方法を書いてください。上記の手法は、パフォーマンスを高く保つための良い出発点ですが、本当のトリックはプロファイラーです。ChromeまたはFirefoxでアプリケーションのプロファイルを作成する場合（ヒント：正確なボトルネックを確認できるように多くのメソッドを使用します。したがって、後で物を移動する必要はありません-とにかくこれを行う必要があります。）正確なタイミング結果。私の場合、ブラウザの時間の80％がバックグラウンドの継続的な再描画にかかっていました。それを邪魔にならないように移動した後、他の呼び出しがそれぞれ40％以上を占めるのを見ました。1〜2時間後、FPSの大幅な向上が見られました。
あなたの結果からも聞きたいです。私は同じことをしようとしてきた。たくさんの数学をするのは良いことですが、キャンバスを入れるとすぐに精神的でフレームレートが低下します。
エフェクトを表示する前景オーバーレイがありました。これは非常に高品質の画像でしたが、アルファの影響で速度が非常に低下したため、1秒あたりのフレーム数を増やす代わりに完全にドロップしました。
別のことは、PHPを使用していくつかの重い計算を行うことでした。大規模なデータセットがありましたが、データを計算して表示するためにJavaScriptを取得するのではなく、PHPに処理を行わせ、JavaScriptに結果を表示させることにしました。JavaScriptは数学で「sehr gut」なので、これはあまり時間を節約しませんでした。
サイト全体がHTML5になっていると思いますので、バックグラウンドワーカーで遊んでみてください。
お役に立てば幸いです。結果を共有してください。