Canvasで表現する打ち上げ花火として、Canvasを使った作品をご紹介しましたが、PC版Webkitを除く全てのブラウザ(スマホブラウザは勿論、IE9など)で重いという課題がありました。PCブラウザに限定すれば、ブラウザやハードウェアの進化ととも改善される問題ではありますが、スマホ(に限らず携帯端末)は2年縛りで購入するユーザーが圧倒的に多く、1・2年前の機種(環境)を使用する状況が続くことが容易に想像できます。スマホサイトやアプリ制作を手掛けたことのある方はご存知の通り、Android2.xは色々と不都合があるだけでなくパフォーマンス面でも十分に配慮して制作する必要があります。(Android4.xではGPUアクセラレーションがサポートされ、期待出来るのですが世代交代は先の話)そこで、本エントリーではロジックを工夫することで得られたパフォーマンス改善の一部をご紹介します。目的(目標)Canvasのレンダリングにおいてボトルネックとなる処理を把握すること。高コストな処理を把握出来ていれば、今後パフォーマンスに配慮したロジックが組めます。試行錯誤する中で、際立ってパフォーマンス改善が見られたもの。requestAnimationFrame()を使用するいまや定番ですが、アニメーション目的であればsetTimeout()やsetInterval()よりrequestAnimationFrame()の方が多くの場合で滑らかです。関数を定義するほどでもない一時的な利用であれば、以下コードのように無名関数でラップして使用しています。);})();Canvasの状態操作を必要最小限にするここで言う状態とは、fillStyle()やshadowColor()などの設定を指します。先日作った打ち上げ花火では、火花(色付きパーティクル)の内側に白いパーティクルを配置することで残像を表現しています。今回のケースではforループの直前で色変更を行い、ループを2回行った方が高速です。※配列の長さに左右されますが、一般的にはループは少ない方が速いちなみに残像をarc()ではなくclearRect()で表現する事で色変更の必要がなくなり、forループが1回で済みますが、arc()を使用して2回ループした以下パターンの方がハイパフォーマンスでした。今回の打ち上げ花火では採用を見送ったもの。差分のみレンダリングする画面全体を再描画する必要がなければ、部分的にクリアして差分のみレンダリングします。当然ですが、描画する面積が広いほど負荷が高くなります。);canvas.ctx.beginPath();canvas.ctx.arc(last.posX,last.posY,last.size,0,Math.Radian,true);canvas.ctx.fill();浮動小数点座標を整数に変換するCanvasでは整数以外の座標でレンダリングすると、線が滑らかになるよう自動的にアンチエイリアスが使用されます。滑らかなアニメーションが必要でなければ、Math.round()などで整数に変換した方が負荷が下がり高速です。整数に変換(四捨五入or切り捨てなど)のデメリットとして、斜め方向のアニメーションが不自然な動きとなりますし、GPUアクセラレーション対応の環境では整数以外でも高速に動作するようなので、最新の環境では劇的な変化はないということを付け加えておきます。別のCanvas要素に予め描画しておき、必要に応じてz-indexやdisplayで切り替えた方が高速です。参考情報Canvasのパフォーマンス改善手段を色々と調査しましたが日本語での纏まった情報は少なく感じました。私が見た中では以下のサイトが非常にわかり易く大変参考にさせていただきました。Rocks最後にパフォーマンス改善前と改善後のデモは以下リンクよりご覧ください。Canvas打ち上げ花火デモCanvas打ち上げ花火デモ(パフォーマンス改善版)今回ご紹介したパフォーマンス改善例で、スマホではiOS5.x+Safariは大幅に改善されました。Android2.3.xではまだ処理が重く、もう少し改善出来ればといったところです。今後新たな気づきがあれば追記、もしくは別のエントリーでご紹介します。HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください※(株)インフォマークのお問合せフォームへ移動します。重富ビル2FTEL.082-504-8311。