page_adsence

2010年5月26日水曜日

Jqueryの高速化に関して

基本的には以下の通り。

1.常に最新版を使う。
 これは言うまでもなく、Jqueryはアップデートの度に処理が高速化されています。
 プロジェクト発足時には常に最新版を使用するように心がけたほうがいいと思います。
 ただし、開発中やリリース後に変更する場合は開発環境で何度もテストしてからリリースしないと
 思わぬことが起こるかも知れません。

2.Javascriptのファイルはリリース前に1つのファイルにまとめて圧縮するとよい。
 これはサーバに対するリクエストの回数を減らすためというのと、
 ファイル容量を減らすことでレスポンスを早くするためというのがあります。
 YUI Compressorは変数名を短くしたり、動作に影響しないコメントや空白を除去してくれます。
 使い方はStackTraceを参考に。

3.eachよりfor文を使う。
 JqueryよりJavascriptの原文の方が早いってことですね。

4.セレクタにはclass指定ではなくID指定を使用する。
 これはJquryのソースを見ればわかりますが、class指定した場合には全ての HTML ノードを列挙して、それぞれについてクラス名を調べます。
 しかしID指定した場合だとJavascriptに元々あるgetElementByIdで取得できるので早く処理が済みます。

5.セレクタに対象範囲を記述する。
 これは項番4の補足のようなものです。
 Jqueryでセレクタを使用する場合には「IDで取得してから、子ノードに書かれているクラスやタグで絞る」
 これを徹底すべきです。
 IDを与えることによって検索範囲が縮まり、高速化できます。
 マークアップエンジニアとJavascriptエンジニアが異なる人の場合、
 仕様書を元にJavascriptが影響あるであろう範囲に関してはあらかじめ要望を出しておきましょう。
 ただしIDやclass指定を過度にすると、HTML自体が冗長になってしまい、
 後々のメンテナンスにも響いてくるので、Firebugのプロファイルなどを駆使して現在のコードのベンチマークを取ってみてうまくトレードオフしていきましょう。

6.キャッシュやメソッドチェーンを使用する。
 同じセレクタを何度も使用すると毎回無駄に処理が発生してしまいます。
 なるべくキャッシュやメソッドチェーンを使用して記述しましょう。
 個人的にはメソッドチェーンのほうがすっきり書けるので好きです。
よくない例)
$('#test div').css(...);
$('#test div').click(...);
$('#test div').append(...);

よい例:キャッシュを使う)
var tesdiv = $('#test div');
testdiv.css(...);
testdiv.click(...);
testdiv.append(...);

よい例:メソッドチェーンを使う)
$('#test div').css(...).click(...).append(...);


7.DOM操作はなるべくしない
 append()、prepend()、before()、after()などは処理に時間がかかります。
 一度に大量のDOMを操作するとブラウザクラッシュの原因にもなりますので注意しましょう。
 html()のほうが処理ははやいみたいなので、なるべくならこちらを使うようにしましょう。

8.concat()よりjoin()を使う。
 concatとjoinに関してはどうやら違うようです。
 この記事ではベンチマークがとられていて、それを見る限りjoinが早い場合というのはある程度限られた状況におけるものみたいです。
 今まで基本的には配列に入れてjoinしてましたが、Array.join(",") のように、要素間にセパレータを埋め込む場合かIE で沢山(30~?)の要素数がある場合以外は'+'で文字列結合したほうがよいようです。
 ただしコードの可読性とかもあるので、'+'で文字列結合する場合は書き方を気をつけましょう。
 (ある程度長い文字列同士を結合する場合には改行するなど)

9.return falseすること
 「return false;」を忘れると、ページの一番上に戻ってしまうことがあります。
 これは結構煩わしいので、忘れないようにしたいところです。
 
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
原文(英文)です。

http://d.hatena.ne.jp/nitoyon/20081211/jquery_fast_css
問題点や改善方法を手順を踏んで解説してくれています。
Jquery内部でどういった処理が実行されているのかまで書かれているので、
非常にわかりやすいです。