繰り返し可能なストレスシーンを作成する
既知の数の移動オブジェクト、重なり合うエフェクト、およびテキスト ラベルを使用してテスト状態を構築します。記録または固定シードをキャプチャして、各実行でほぼ同じ作業が行われるようにします。空のシーンのベースラインと混雑したシーンを比較し、JavaScript の更新、キャンバスの描画、画像のデコード、またはスタイルとレイアウトの作業に時間が費やされているかどうかを検査します。
描画が主な負荷なら、似たパスをまとめる、不要な状態変更を減らす、変更された領域だけを描画するといった方法を試します。更新処理が主な負荷なら、プロファイラーで衝突判定やオブジェクトの反復処理を調べます。MDNのCanvas最適化ガイドは、これらを評価すべき選択肢として説明しており、常に高速化を保証する設定とはしていません。
コストを 1 つ変更して結果を確認する
静的な背景を何度も描画しているなど、コストの原因と思われる処理を一つ選びます。その背景をオフスクリーンCanvasにキャッシュし、同じシーンで変更前後を比較します。異なるサイズやリサイズ後の表示も確認してください。古い寸法を使ったりテキストの拡大率が変わったりすると、キャッシュが不正確になることがあります。
比較に使った端末、ブラウザー、シーン、操作を記録します。1台で得た結果はその実行の診断には役立ちますが、あらゆるブラウザーや端末の性能を示すものではありません。合成シーンで改善した最適化が別の場面で操作感を悪くする場合もあるため、元の操作を再テストします。
キャンバスゲームのパフォーマンスについての質問
変更されたピクセルのみを再描画する必要がありますか?
シーンの複雑さと、全面描画にかかるコストによります。部分描画では管理処理が増え、動くオブジェクトの周囲に古いピクセルが残る場合があります。同じ再現可能なシーンで両方の方法を比べてください。
Canvasの描画処理をまとめれば必ず速くなりますか？
いいえ。試す価値のある仮説です。対象のブラウザーと負荷を測り、描画を壊さず実測したボトルネックを改善した場合にだけ変更を採用します。
関連情報
古い情報を見つけましたか？ 訂正を連絡