jQueryのパフォーマンスにおいて厳守すべき11の掟

勝手に意訳。
ほんとうにざっくりとした意訳ですので、詳細は下記のリンクをどうぞ。

jQuery Performance Rules
http://www.artzstudio.com/2009/04/jquery-performance-rules/

1. 常に#idを指定する Always Descend From an #id

Javascriptのネイティヴなメソッド getElementById()を利用するので速い。

2. クラスの前にタグを指定する Use Tags Before Classes

タグのセレクタは#idの次に速い。
どうしても#idをしてできない場合はタグを指定すべし。( $('head') )
なぜならJavascriptのネイティヴなメソッド getElementsByTagName() を利用するから。

<div id="content">
  <form method="post" action="/">
    <input type="radio" class="on" name="light" value="red" />
    <input type="radio" class="on" name="light" value="blue" />
    <input class="button" id="traffic_button" type="submit" value="Go" />
  </form>
</div>

var radio = $('#content input.on');

IDにタグ名を指定してはいけない。

// var content = $('div#content');

'content' IDをみつけるためにすべての<div>タグをループで回して捜査することになる。

3. jQueryオブジェクトをキャッシュする Cache jQuery Objects

こんなことをしてはいけない。

$('#traffic_light input.on').bind('click', function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow');

こうすべき。

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

4. チェイニングのパワーを活用する Harness the Power of Chaining

前項は次のようにも書ける。
こちらのほうがタイプ量が少なくてすむ。

var $active_light = $('#traffic_light input.on');
$active_light
  .bind('click', function(){...})
  .css('border', '3px dashed yellow')
  .css('background-color', 'orange')
  .fadeIn('slow');

5. サブクエリを使うUse Sub-queries

<ul id="traffic_light">
  <li><input type="radio" class="on" name="light" value="red" /> Red</li>
  <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
  <li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>

var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');

最初に親ノードをキャッシュしてから子ノードを操作する。

6. DOMを直接操作しない Limit Direct DOM Manipulation

DOMを直接操作するのは速度的に賢明ではない。

悪い例

var top_100_list = [...], // 100個のユニークな文字列が入ってると仮定
$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++) {
  $mylist.append('<li>' + top_100_list[i] + '</li>');
}

こう書くべき

var top_100_list = [...], // 100個のユニークな文字列が入ってると仮定
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list

for (var i=0, l=top_100_list.length; i<l; i++) {
  top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>';

$mylist.replaceWith(top_100_ul);

7. Leverage Event Delegation Leverage Event Delegation (a.k.a. Bubbling)

イベントリスナー関数をたくさんのノードに登録するより、親ノードに一度だけ登録すべき。

悪い例

$('#entryform input').bind('focus', function(){
  $(this).addClass('selected');
}).bind('blur', function(){
  $(this).removeClass('selected');
});

こうすべき。

$('#entryform').bind('focus', function(e){
  var cell = $(e.target);  // e.target はイベントが実行されたノードを指す
  cell.addClass('selected');
}).bind('blur', function(e){
  var cell = $(e.target);
  cell.removeClass('selected');
});

8. クエリの無駄を排除する Eliminate Query Waste

9. $(window).loadに処理を移譲する Defer to $(window).load

なんでもかんでも $(document).ready で行うのは考えもの。

10. JSファイルを圧縮するCompress Your JS

YUI Compressor とか Packer とか

11. ライブラリを学ぶ Learn the Library

チートシートを活用してjQueryに何ができるのか学ぶ。

関連リンク:
使えるjQueryのtipsとトリック20選