jqueryを高速化させるセレクタの書き方

スピードのチェック方法

スピードをチェックしたい時に、使えるのがfirefoxのプラグインfirebugです。
例えば、
test()という関数のスピードを見たいときは

<script type="text/javascript">
console.profile();
test();
console.profileEnd();
function test(){
$('div').css('color','#f00');
}
</script>

と書いてあげると、

画像の赤枠のように、
firebugのコンソール→全て→関数名(test)をみると、実行時の時間を見ることができます。

テスト結果

とあるプログラムでセレクタの違いでどう違うのか、そして、
1.3以降getElementsByClassNameが対応しているので、1.2のjqueryと1.5のjqueryの違いでテストしてみました。

セレクタ名 Jquery1.2 Jquery1.5
$(‘div’) 9.427ms 8.444ms
$(‘.test’) 3.169ms 1.639ms
$(‘div.test’) 2.891ms 1.7ms
$(‘#test’) 0.754ms 0.76ms
$(‘div#test’) 1.028ms 1.773ms

プログラムによってスピードが変わってきますが、基本的に

1、できるだけ新しいjqueryを使う。(①より)
2、getElementsByClassNameが使えると早くなる。しかし、IEでは使えないので、要素をクラスの前に書いてあげる。(②と③より)
3、idセレクタが一番早い。(④より)
4、idセレクタの場合、要素はいらない。(⑤より)

おまけ

javascriptでやってみました。

document.getElementById(‘fgh’) 0.477ms

コメントする