JavaScriptの高速化試作の覚書 – JavaScriptグラフィックス

『JavaScriptグラフィックス – ゲーム・スマートフォン・ウェブで使う最新テクニック』ってのを読んだので必要そうな部分を抜粋

速度測定の指標

動作速度は端末によって違う。だからある一定の指標が必要。以下のコードを走らせることで、その端末で1秒間にどれだけの動作を行うことができるのかの指標を取得することができる。これを用いることでどの端末でも動作改善試作が表す影響を見ることができる。

var StartTime = new Date().getTime(); for(var count=0 ; timeElapsed < 1000 ; count++) { // ここで検証する動作を行う timeElaspsed = new Date().getTime() - startTime; } [/code]

countが増えれば増えるほど動作速度の向上を意味しており、改善前と改善後での数値の差に注目する。ただし、Firebugとかで計測できる環境があるならそれを使うのが一番いい。

高速化実装試作

  • 80-20のルール(20%のコードが80%のCPU時間を使う)に基づいて20%に力を入れて高速化をおこなったほうがいい
  • 三角関数等の重い計算処理を行うのであれば、結果をテーブルとして持ち近似値を使用したほうが早い
  • 複数の判定要素がある場合は、各ビットでフラグを表現し&演算子で判定を行ったほうが早い
  • XORをうまく使ってtoggleを実現できる(ex. toggle ^= 1;)
  • Math.Floor()よりもビットシフトを使用したほうが早い(ex. x = y >> 0)
  • jQueryのセレクタ指定は呼ばれるたびに検索が走るので複数呼ばない。複数呼ぶ場合は変数へキャッシュする。
  • jQueryのセレクタ指定は検索開始を指定することができる(ex. $(‘.class’, start-element);)
  • jQueryのcss演算子は遅い。複数変更する必要がある場合は、styleオブジェクトを抽出して変更する。(ex. $(‘#element’)[0].style)
  • 複数の要素を追加する場合は追加する文字列を作成して一回で追加したほうが早い。

アニメーション

どのような端末でも一定のスピードを保証するためにフレームレートを指定する。1秒間にどの程度の動作を行うことができるかを取得して、それに伴いアニメーションの移動距離を変えることでどの端末でも一意のスピードを保証することができる。例えば、1秒間に500回動作する端末(A)と1秒間に100回動さする端末(B)があった場合、どちらも同一のスピードを再現したいのであればBは1回の動作でAの移動距離の5倍移動させれば同じスピードを表現することができる。

まとめ

高速化について知りたくて呼んでみた本なんだけど、高速化の実装は最初の方にしか書いてなかったので非常に残念。アニメーションをJavaScriptで記載する場合(ゲーム等)は参考になる記述もたくさんあるようなので、もしゲームを作ることになったら更に深く読むことにする。