2009年7月12日日曜日

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選

0 件のコメント: