JavaScriptを高速化する6つのテクニック

後藤大地　 [2009/11/11]

Thomas Fuchs, author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus.

Thomas Fuchs氏が6 easy things you can do to improve your JavaScript runtime performanceにおいてJavaScriptの実行パフォーマンスを改善するための6つのテクニックを紹介している。Thomas Fuchs氏はscript.aculo.usの開発者であるとともにPrototypeコアチームのメンバーも務めている。またRuby on Railsでコアチームで開発を担当していたこともある。

JavaScriptエンジン
SpiderMonkey (Firefox)
JavaScriptCore (Safari)
JScript (IE8)
V8 (Chrome)

紹介された6つのテクニックは次のとおり。

関数呼び出しを避ける

関数呼び出しを使わずにインラインに展開する。なおIE8では実行してから1秒後にIEの動作を遅くする原因になっている可能性があるという警告ダイアログを表示してくるため、関数呼び出しについてはベンチマーク結果が掲載されていない。


関数呼び出しではなくインラインに展開する - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較

括弧で生成せずにnewを使う

従来の{}といった生成方法ではなくnewを使って配列やオブジェクトを作成する。


配列とオブジェクト生成の指定方法の違い - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較

ループを展開する

forとwhileの間には性能差は見られない。ループは展開することで実行速度の改善が期待できる。


ループを使うケースと展開するケース - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較

ローカル変数としてキャッシュして使う

グローバル変数のままアクセスせずに、一旦ローカルにキャッシュしてから利用する。


ローカル変数とグローバル変数 - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較

評価式の記述方法を工夫する

評価式を工夫し、たとえば「&&」を使う場合など、先にfalseが入る可能性が高いものを先に記述するなどして実際のステップ数の削減に努める。


評価式を工夫して処理ステップを減らす - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較

必要がないなら使わない

with () {}でスコープを指定する方法と直接記述する方法では、直接記述する場合の方が実行速度が速い。また例外処理を補足する記述はそうでない場合と比べて実行速度が遅い。


withスコープの利用の有無 - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比較


例外処理の利用の有無 - 6 easy things you can do to improve your JavaScript runtime performanceより抜粋	ブラウザごと実行時間比

6 easy things you can do to improve your JavaScript runtime performanceではこれ以外にもあまり効果が見られないテクニックについても記載があるほか、JITエンジンを搭載したブラウザでは特定の機能がうまくサポートされていないことなども紹介されている。

Thomas Fuchs氏はJavaScriptのパフォーマンスについてまとめた電子書籍JavaScript Rocks! JavaScript Performance, Benchmarking and Tuning Ebookの執筆者であり、最適化の資料として同書籍を薦めている。また高速化に関しては以前JavaScriptを高速化する31のチェックリストを公開している。

JavaScriptを高速化する31のチェックリスト [2009/10/29]