タイトルの通りです。セレクタを使う際の注意点やDOM操作をする場合に気をつけることを書いています。

idセレクタを使いましょう

jQueryでのセレクタは次の順番で速いようです：

1. idで指定する
2. タグ名で指定する
3. classで指定する
4. 属性で指定する
5. jQuery独自拡張セレクタで指定する

ってことで特別な理由がなければ#idをセレクタに使ってください。

idで取得するときにタグ名を指定しないように

var $hoge = $('div#hoge'); のような指定の仕方はアウトです。なぜならhogeというidを見つけるためにdiv要素をすべて探す必要があるからです。単に var $hoge = $('#hoge'); のようにしてください。これでjQueryはJavaScriptのネイティブ関数であるgetElementByIdを使ってオブジェクトを取得します。

クラスセレクタよりも要素セレクタを使いましょう

クラスセレクタよりも要素セレクタの方が速いようです。これは要素セレクタを使うとJavaScriptのネイティブ関数であるgetElementsByTagNameを使えるからです。セレクタを使用する際の優先度としてはid > 要素 > classの順番です。

クラスセレクタでは要素名を指定しましょう

クラスでオブジェクトを取得するときは var $hoge = $('.hoge'); ではなくて var $hoge = $('div.hoge'); のように要素名を”.”の前に書く、ということです。

複数の要素を並べるときはidを先頭にしましょう

var $hoge = $('div #hoge') はアウトです。正解は var $hoge = $('#hoge div') です。

複数のidを並べてオブジェクトを取得しないように

var $hoges = $('#hoge #hogehoge') はすごく遅くなるそうです。idセレクタを使うときは一つのidを使うようにしましょう。

コンテクストを直接指定するよりもfind()を使いましょう

は上から順番に実行速度が速いようです。なのでidでオブジェクトを取得した後にfindメソッドを使う、というのが最も効率的になります。

jQueryオブジェクトのキャッシュを使いましょう

になります。わかりますね。$('#hoge') が出てくるたびに getElementById でオブジェクトを取得しようとするから、ダメな例はそれだけ遅くなります。何度も使うオブジェクトはキャッシュしてください。

サブクエリを使いましょう

ある要素の子要素を取得するときは、まず親要素をキャッシュした上で子要素を取得しましょう。つまり が正解です。

メソッドチェインを使いましょう

先ほどの正解例はメソッドチェインを使っていないのでアウトです。 上の正解例のようにメソッドチェインで一気に処理させましょう。

DOM操作は最小限に抑えましょう

例えば100個のli要素をjQueryで追加する場合を考えましょう。このときのダメな例と正解例はこのようになります： ダメな例ではappendメソッドでDOM操作を100回行っています。prependを含めると合計101回です。このような場合は正解例のように一旦newListのような変数にすべての要素を詰め込んだ上でprependでDOM操作を行いましょう。これだとDOM操作はたった一回だけということになります。

15個以上の要素にスタイルを適用する場合はcssメソッドではなくてstyleタグを追加しましょう

例えばhogeクラスをもったdiv要素に "color: red" を追加するとしましょう。そのとき、hogeクラスをもったdiv要素が15個以上ある場合は $('div.hoge').css('color','red'); ではなくて $('<style> div.class { color: red; } </style>').appendTo('head'); のようにhead要素内にstyleタグを追加しましょう。

jQuery(document).ready(function)の代わりにjQuery(function)を使いましょう

この二つは同じです： これでほんのごくわずかですがjsファイルの容量を減らすことができます。

jQuery(window).loadとjQuery(document).readyを使い分けましょう

この二つは実行されるタイミングが異なります。$(document).ready はDOMが構築された時点で実行されますが、$(window).load は画像を含めてページの読み込みがすべて完了した後で実行されます。実行されるタイミングが違うわけですから、$(window).load でできることはそちらに任せましょう。

Google CDNからjQueryを読み込みましょう

これが一番速くjQueryを読み込めます。

参考サイト

jQuery Performance Tips Cheat Sheet | Dumitru Glavan