To follow-up from my post yesterday, here are the new numbers, for
1.3.3 (work in progress, naturally):
http://ejohn.org/files/jquery1.3.3/id.html
jQuery version used = 1.3.3pre
Total number of DIVs = 100
Paragraphs per DIV = 50
-----------------------------------
$("#div50 p") = 2ms
$("p", "#div50") = 0ms
$("#div50").find("p") = 1ms
--John
On Wed, Feb 25, 2009 at 4:12 PM, Kevin Dalman <kevin.dal...@gmail.com> wrote:
>
> 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>
>
