jQueryセレクタのパフォーマンス：elem vs id

elem指定とID指定のjQueryセレクタパフォーマンス実験を行いました。 “先にJavascriptでelementをとってそれをjQueryの$セレクタに囲むやつ” vs “直接jQueryのidセレクタでとるやつ”。

コードで言うと $(document.getElementById(“foo”)) vs $(“#foo”)

普通前者が勝だろうと思うだろう、 どれくらいの差かを確認したくて。

結果

一万回ループでとった結果です。

• IE8: 187 vs 344
• IE6: 203 vs 453
• Firefox×(3.6.3): 21 vs 63
• Chrome(4.1.xx): 9 vs 39

サンプルコード

デモページへ

var t0 = new Date();

for (var i=0; i<10000; i++){
	$(document.getElementById("foo"));
}

var t1 = new Date();

for (var i=0; i<10000; i++){
	$("#foo");
}

var t2 = new Date();

alert("直接elementを渡す時間は：" + (t1-t0) + " , ID指定でとる時間は："+ (t2-t1));