Firefox利用時の注意点

質問

javascriptで簡単なゲーム制作をしているのですが、firefoxで妙に動作が重かったり、処理落ちしすぎてブラウザが固まったりすることがよくあります。
chromeやIEでは問題なく動きます。(windows8モードにしてないchromeで、動作がおかしいことはありました）
考えられる原因が多すぎると思いますが、一般的にどんな点に気をつけたら良いのでしょうか。
たぶんなにか本当に初歩的なところに問題があると思うのですが。。
アドバイスがありましたら、ご教授いただけると嬉しいです。

ちなみに各ブラウザは全部最新バージョンで、jqueryなどライブラリは使ってません。
またゲームの種類はシューティングやアクションで、全般的に動きが遅かったり、弾がいっぺんにたくさん出るところでフリーズしたりします。
まったく動かなかったということは今までなかったと思います。

よろしくお願いします。

回答No.2

byDesign · ベストアンサー

Firefoxにはプロファイラーと言うものが付いているのはご存知でしょうか？

これを使うと、呼び出された関数に使用した時間がわかるので
どの関数が重たいのか調べられます。

詳しくは以下のサイトを参照
http://smellman.hatenablog.com/entry/2013/05/16/012020

お礼

使ってみたところ、問題の箇所を割り出すことができました。
原因は下の方の補足の通りです。思ったとおり本当に初歩的なところにありました。
ご回答ありがとうございます。

回答No.1

b0a0a

WebGLなんかを使ってるわけではないですよね？
モダンブラウザ間でそこまで差が出るとは思えないのですが……
気をつける点としては物理エンジンなどは全部Workerに持ってきて、メインスレッドではrequestAnimationFrameを使った更新処理をする。
DOMではなくCanvasを使う、ということでしょうか。
他にもCanvasのgetContextの第二引数にオプションを指定することにより若干の性能改善が期待できます。
それ以上だとWebGLを使う形になるでしょう。

お礼

ご回答ありがとうございます。

workerやwebGLについては存在も知らなかったので、勉強になりました。
またこれまでsetTimeoutばかり使っていたので、requestAnimationFrameとの違いも調べてみてなるほどと言う感じです。
firefoxでの問題についてですが、解決したので補足に書いておきます。
教えて頂いたことをきちんとふまえ、勉強していきたいと思います。

補足

html上にすでに表示してある画像をプレロード済みとして使っていたのが原因のようです。
きちんとidを指定して取り寄せなくても、chromeやIEでは仕様なのかなにかのはずみなのかロード済み画像をhtmlから持ってきてくれたのに、どうやらfirefoxではわざわざ元ファイルを取りに行っていたようです。
idから指定し直したらきちんと動くようになりました。