gerenuk.crazyphoto.org/

Nettuts+ では、JavaScript フレームワークの定番となっている「jQuery」のパフォーマンスを、すごく簡単にアップさせる方法が紹介されています。
実はじっくり読み進めているうちに「これ本当に効果あるの？」と思ったり思わなかったりする項目もありましたが……とにかく、ミリ秒単位での高速化を目指しているような方は是非参考にしてみてください。

01. 常に最新のバージョンを使う

jQuery は現在も改良が続けられているプロジェクトです。
Google で提供されているライブラリーを使うという方法もあります。

02. スクリプトを1つにまとめ、圧縮する

ブラウザーの多くは、同時に2つ以上のスクリプトを処理できません。
そのためファイルが増えると読み込みの順番待ちが発生し、結果的にロード時間が長くなってしまいます。
スクリプトが全ページで一々ロードされることを考えて、（自分で書いた）スクリプトは1つのファイルにまとめ、圧縮ツール（例えば、「/packer/」のような）を使ってサイズを減らすことを検討してみてください。
ファイルサイズが小さくなることは、ロード時間の短縮に繋がります。

03. 「each」のかわりに「for」を使う

JavaScript に元々あった関数の方が、jQuery で実装された似た機能を持つものよりも常に速く処理できます。

以下のグラフは、ループ作業で「for」と「each」を比較したものです。
CSS や DOM を扱うような複雑な作業では、もっと差が出てくるはずです。

04. 「class」のかわりに「id」を使う

オブジェクトを選択するときには「id」を使った方がいいでしょう。
これは、jQuery がオブジェクトを読み込むために getElementByID() を使っているからです。

以下のグラフは、要素を選択するときに「id」と「class」で指定した場合を比較したものです。

05. セレクターに「context」を与えてやる

セレクターでどうしても class を指定したいときは、context（直訳すると前後関係）を与えてやりましょう。
例えば、

$('.class').css ('color' '#123456');
$('.class', '#class-container').css ('color', '#123456');

1行目は全体の DOM から class を読み出す必要がありますが、2行目のように context を使って class-container という id に絞ってやることで高速化することが出来ます。

06. 常にキャッシュする

セレクターを何度も使ってはいけません。
出来るならば1行にまとめたり、変数を使ったりしてキャッシュしておきたいところです。
また、特にループ内でセレクターを多用しないでください。かなり遅くなってしまいます。

07. DOM 操作を避ける

prepend()、append()、after()のように何かを挿入する作業は比較的時間がかかるため、DOM 操作は出来る限り避けたほうがいいでしょう。
出来るのならば、html() などで代用してみてください。

08. 長い文字列を扱う場合は、concat() よりも join() を使う

まず配列を作り、それを埋めてから join する方が、concat よりも速くなります。

09. 「return false;」を忘れない

「return false;」を忘れると、ページの一番上に戻ってしまうことがあります。
これは結構煩わしいので、忘れないようにしたいところです。

10. おまけ。チートシートとリファレンス

チートシートとリファレンスを参考にして、開発時間も高速化しましょう。

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています。

• 10 Ways to Instantly Increase Your jQuery Performance – Nettuts+

関連記事

• 2009/06/13: 未来を先取りした「手動」のウェブ・インターフェイス
• 2009/06/23: 掟破りで何が悪い！　横方向にデザインされた格好良いサイト10個
• 2009/06/26: このサイトの「Twitter に送る（ReTweet ボタン）」が出来るまで
• 2009/06/10: 最適なレイアウトとは何か？　固定か、可変か、エラスティック・レイアウトか
• 2009/06/15: 必ずモノにしたい！　ウェブデザイン向け Photoshop チュートリアル16個