さくさく動くHTML5脱出ゲームを目指して

ティラノスクリプト云々というよりは、よくあるjQueryの高速化の話です。

(2017年07月17日再編集)

セレクタにclassをつかうときは要素名も書く

name属性でclassを設定してjQueryで操作するときは、要素名も一緒に書くようにします。 [image storage=“test.png” name=“detail_item”]なら、以下のように指定します。

$( 'img.detail_item' ).attr( 'src', image );

ティラノスクリプトはdivやimgなどの要素を追加/削除、表示/非表示をしながらゲーム画面を構成しています。ブラウザの開発者ツールで見ると分かりますが、例えばレイヤーを4枚使えば、fore/back合わせて8つのdivが表示されていることになります。

必要な要素をより速く見つけてもらうために、要素名+class名と書いたほうがいいです。劇的に速くなることはありませんが、書かないよりはマシという感じです。

何回も呼び出す要素にはidをつける

jQueryのセレクタの中で最速なのはidです。ただ、ティラノスクリプトのタグでidをつけるものはなかったと思います。

とりあえずname属性を設定しておいて、attr()で後からidをつけています。idとclassは名前を少し変えています。

$( 'img.detail_item' ).attr( 'id', 'detail_Item' );

このようにidだけを指定した書き方が一番速いのだそうです。

$( '#detail_item' ).attr( 'src', image );

よく使うjQueryオブジェクトをキャッシュしておく

要素にidを設定したら、もうひと工夫。セレクタの部分を変数に入れておくとキャッシュされ、次回呼び出すときの時間を短縮できるのだとか。これは知りませんでした。

//変数化してキャッシュ
var detailItem = $( '#detail_Item' );   
//使うときはこうする
detailItem.attr( 'src', image );

jQuery以外のこと

こんな感じで手探りながらいろいろ試してみています。

まずは何よりTinyPNGなどの圧縮ツールを使ってゲーム内で使用する画像を軽量化しておくことが一番簡単で効果的な方法だと思います。たとえば960px*540pxのPNG形式画像なら、圧縮ツールで50%以上軽量化することができます。

参考サイト