FYI, I built a quick test page for this. As previously noted, the
differences in v1.2.6 are relatively small - about 2x as long for one
syntax over the other. But with 1.3.2 - Wow! - 60x longer!
jQuery version used = 1.3.2
Total number of DIVs = 100
Paragraphs per DIV = 50
-----------------------------------
$("#div50 p") = 574ms
$("p", "#div50") = 8ms
$("#div50").find("p") = 9ms
For anyone interested, below is *the complete test-page* so you can do
your own testing - just copy and paste. No external files are
required. Since the HTML is all generated by script, you can easily
modify the number of divs and number of paragraphs per div just by
changing the vars. You can also add as many test-cases for comparison
as you want. It's all pretty self-explanitory.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>jQuery Speed Test</TITLE>
<STYLE type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFF;
background: #000;
margin: 15px;
}
div {
border: 1px solid #FF0;
padding: 5px 20px;
margin: 1ex 0;
}
p {
margin: 0;
}
div#Output {
font-size: 1.25em;
color: #000;
background: #FFF;
border: 3px solid #999;
margin-bottom: 15px;
}
div#Output p {
margin: 1ex 0;
}
</STYLE>
<SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
var
c_divs = 100
, c_paras = 50
, myDiv = Math.floor(c_divs/2)
, $Output = $("#Output")
, $DIV
, $Test
, start, end
, a_Selectors = []
, a_Times = []
;
$DIV = $("<div/>");
for (var i=1; i <= c_paras; i++)
$DIV.append("<p/>").append( i );
for (var i=1; i <= c_divs; i++)
$DIV.clone(false).appendTo(document.body).attr("id","div"+i);
// Test # 1
start = new Date();
$Test = $("#div"+ myDiv +" p");
end = new Date();
a_Selectors.push('$("#div'+ myDiv +' p")');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $("p", "#div"+ myDiv);
end = new Date();
a_Selectors.push('$("p", "#div'+ myDiv +'")');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $("#div"+ myDiv).find("p");
end = new Date();
a_Selectors.push('$("#div'+ myDiv +'").find("p")');
a_Times.push(end - start);
// Write the Results
$Output.html(
"<p>jQuery version used = "+ $DIV.jquery +"</p>"
+
"<p>Total number of DIVs = "+ c_divs +"</p>" +
"<p>Paragraphs per DIV = "+ c_paras +"</p>" +
"<hr />"
);
var c = a_Selectors.length;
for (var i=0; i < c; i++)
$Output.append("<p>"+ a_Selectors[i] +" = "+ a_Times[i]
+"ms </
p>");
});
</SCRIPT>
</HEAD>
<BODY>
<DIV id="Output">Working...</DIV>
</BODY>
</HTML>
