jQuery .first() vs :first vs .eq(0) vs. [0] vs. $([0])

JavaScript performance comparison

Revision 3 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="container"><div id="intro"><div id="pageHeader"><h1><span>css Zen Garden</span></h1><h2><span>The Beauty of<acronym title="Cascading Style Sheets">CSS</acronym>Design</span></h2></div><div id="quickSummary"><p class="p1"><span>A demonstration of what can be accomplished visually through<acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p><p class="p2"><span>Download the sample<a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a>and<a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p></div><div id="preamble"><h3><span>The Road to Enlightenment</span></h3><p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible<acronym title="Document Object Model">DOM</acronym>s, and broken<acronym title="Cascading Style Sheets">CSS</acronym>support.</span></p><p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achievedthanks to the tireless efforts of folk like the<acronym title="World Wide Web Consortium">W3C</acronym>,<acronym title="Web Standards Project">WaSP</acronym>and the major browser creators.</span></p><p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons ofthe masters. Begin to see with clarity. Learn to use the (yet to be) time-honoredtechniques in new and invigorating fashion. Become one with the web.</span></p></div></div><div id="supportingText"><div id="explanation"><h3><span>So What is This About?</span></h3><p class="p1"><span>There is clearly a need for<acronym title="Cascading Style Sheets">CSS</acronym>to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire,and encourage participation. To begin, view some of the existing designs in the list.Clicking on any one will load the style sheet into this very page. The code remainsthe same, the only thing that has changed is the external .css file. Yes, really.</span></p><p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym>allows complete and total control over the style of a hypertext document. The onlyway this can be illustrated in a way that gets people excited is by demonstratingwhat it can truly be, once the reins are placed in the hands of those able to createbeauty from structure. To date, most examples of neat tricks and hacks have beendemonstrated by structurists and coders. Designers have yet to make their mark. Thisneeds to change.</span></p></div><div id="participation"><h3><span>Participation</span></h3><p class="p1"><span>Graphic artists only please. You are modifying this page, so strong<acronym title="Cascading Style Sheets">CSS</acronym>skills are necessary, but the example files are commented well enough that even<acronym title="Cascading Style Sheets">CSS</acronym>novices can use them as starting points. Please see the<a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><acronym title="Cascading Style Sheets">CSS</acronym> Resource Guide</a>for advanced tutorials and tips on working with<acronym title="Cascading Style Sheets">CSS</acronym>.</span></p><p class="p2"><span>You may modify the style sheet in any way you wish, but not the<acronym title="HyperText Markup Language">HTML</acronym>. This may seem daunting at first if you&#8217;ve never worked this way before,but follow the listed links to learn more, and use the sample files as a guide.</span></p><p class="p3"><span>Download the sample<a href="zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a>and<a href="zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a>to work on a copy locally. Once you have completed your masterpiece (and please,don&#8217;t submit half-finished work) upload your .css file to a web server underyour control.<a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a>to the file and if we choose to use it, we will spider the associated images. Finalsubmissions will be placed on our server.</span></p></div><div id="benefits"><h3><span>Benefits</span></h3><p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer towhen making the case for<acronym title="Cascading Style Sheets">CSS</acronym>-based design. This is sorely needed, even today. More and more major sites aretaking the leap, but not enough have. One day this gallery will be a historical curiosity;that day is not today.</span></p></div><div id="requirements"><h3><span>Requirements</span></h3><p class="p1"><span>We would like to see as much<acronym title="Cascading Style Sheets, version 1">CSS1</acronym>as possible.<acronym title="Cascading Style Sheets, version 2">CSS2</acronym>should be limited to widely-supported elements only. The css Zen Garden is aboutfunctional, practical<acronym title="Cascading Style Sheets">CSS</acronym>and not the latest bleeding-edge tricks viewable by 2% of the browsing public. Theonly real requirement we have is that your<acronym title="Cascading Style Sheets">CSS</acronym>validates.</span></p><p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various implementationsof<acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently, even completely valid<acronym title="Cascading Style Sheets">CSS</acronym>at times, and this becomes maddening when a fix for one leads to breakage in another.View the<a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources">Resources</a>page for information on some of the fixes available. Full browser compliance isstill sometimes a pipe dream, and we do not expect you to come up with pixel-perfectcode across every platform. But do test in as many as you can. If your design doesn&#8217;twork in at least IE5+/Win and Mozilla (run by over 90% of the population), chancesare we won&#8217;t accept it.</span></p><p class="p3"><span>We ask that you submit original artwork. Please respect copyright laws. Please keepobjectionable material to a minimum; tasteful nudity is acceptable, outright pornographywill be rejected.</span></p><p class="p4"><span>This is a learning exercise as well as a demonstration. You retain full copyrighton your graphics (with limited exceptions, see<a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your<acronym title="Cascading Style Sheets">CSS</acronym>under a Creative Commons license identical to the<a href="http://creativecommons.org/licenses/sa/1.0/" title="View the Zen Garden's license information.">one on this site</a>so that others may learn from your work.</span></p><p class="p5"><span>Bandwidth graciously donated by<a href="http://www.dreamfirestudios.com/">DreamFire Studios</a></span></p></div><div id="footer"><a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s XHTML">xhtml</a>&nbsp;<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS">css</a>&nbsp;<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a>&nbsp;<a href="http://mezzoblue.com/zengarden/faq/#s508" title="Read about the accessibility of this site">508</a>&nbsp;<a href="http://www.mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site">aaa</a></div></div><div id="linkList"><!--extra div for flexibility - this list will probably be the trickiest spot you'lldeal with --><div id="linkList2"><!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hackto meet WCAG 1 Accessibility. --><!-- I don't like having to do it, but this is a visual exercise. It's a compromise.--><div id="lselect"><h3 class="select"><span>Select a Design:</span></h3><!-- list of links begins here. There will be no more than 8 links per page --><ul><li><a href="/" title="AccessKey: a" accesskey="a">Sample #1</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: b" accesskey="b">Sample #2</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: c" accesskey="c">Sample #3</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: d" accesskey="d">Sample #4</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: e" accesskey="e">Sample #5</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: f" accesskey="f">Sample #6</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: g" accesskey="g">Sample #7</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li><li><a href="/" title="AccessKey: h" accesskey="h">Sample #8</a>by<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a>&nbsp;</li></ul></div><div id="larchives"><h3 class="archives"><span>Archives:</span></h3><ul><li><a href="/" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs &raquo;</a>&nbsp;</li><li><a href="/" title="View previous set of designs. AccessKey: p" accesskey="p">&laquo; <span class="accesskey">p</span>revious designs</a></li><li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden. AccessKey: w"accesskey="w">Vie<span class="accesskey">w</span> All Designs</a></li></ul></div><div id="lresources"><h3 class="resources"><span>Resources:</span></h3><ul><li><a href="http://www.csszengarden.com/001/001.css" title="View the source CSS file for the currently-viewed design, AccessKey: v"accesskey="v"><span class="accesskey">V</span>iew This Design&#8217;s <acronym title="Cascading Style Sheets">CSS</acronym></a></li><li><a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS. AccessKey: r"accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey">R</span>esources</a></li><li><a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q"accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a>&nbsp;</li><li><a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file. AccessKey: s"accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li><li><a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page. AccessKey: t"accesskey="t"><span class="accesskey">T</span>ranslations</a></li></ul></div></div></div></div><!-- These extra divs/spans may be used as catch-alls to add extra imagery. --><!-- Add a background image to each and use width and height to control sizing,place with absolute positioning --><div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
<script>
Benchmark.prototype.setup = function() {
    var elem;
};

Benchmark.prototype.teardown = function() {
    elem = null;
};
</script>

Preparation code output

A demonstration of what can be accomplished visually throughCSS-based design. Select any style sheet from the list to load it into this page.

Download the samplehtml fileandcss file

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatibleDOMs, and brokenCSSsupport.

Today, we must clear the mind of past practices. Web enlightenment has been achievedthanks to the tireless efforts of folk like theW3C,WaSPand the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons ofthe masters. Begin to see with clarity. Learn to use the (yet to be) time-honoredtechniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is clearly a need forCSSto be taken seriously by graphic artists. The Zen Garden aims to excite, inspire,and encourage participation. To begin, view some of the existing designs in the list.Clicking on any one will load the style sheet into this very page. The code remainsthe same, the only thing that has changed is the external .css file. Yes, really.

CSSallows complete and total control over the style of a hypertext document. The onlyway this can be illustrated in a way that gets people excited is by demonstratingwhat it can truly be, once the reins are placed in the hands of those able to createbeauty from structure. To date, most examples of neat tricks and hacks have beendemonstrated by structurists and coders. Designers have yet to make their mark. Thisneeds to change.

Participation

Graphic artists only please. You are modifying this page, so strongCSSskills are necessary, but the example files are commented well enough that evenCSSnovices can use them as starting points. Please see theCSS Resource Guidefor advanced tutorials and tips on working withCSS.

You may modify the style sheet in any way you wish, but not theHTML. This may seem daunting at first if you’ve never worked this way before,but follow the listed links to learn more, and use the sample files as a guide.

Download the samplehtml fileandcss fileto work on a copy locally. Once you have completed your masterpiece (and please,don’t submit half-finished work) upload your .css file to a web server underyour control.Send us a linkto the file and if we choose to use it, we will spider the associated images. Finalsubmissions will be placed on our server.

Benefits

Why participate? For recognition, inspiration, and a resource we can all refer towhen making the case forCSS-based design. This is sorely needed, even today. More and more major sites aretaking the leap, but not enough have. One day this gallery will be a historical curiosity;that day is not today.

Requirements

We would like to see as muchCSS1as possible.CSS2should be limited to widely-supported elements only. The css Zen Garden is aboutfunctional, practicalCSSand not the latest bleeding-edge tricks viewable by 2% of the browsing public. Theonly real requirement we have is that yourCSSvalidates.

Unfortunately, designing this way highlights the flaws in the various implementationsofCSS. Different browsers display differently, even completely validCSSat times, and this becomes maddening when a fix for one leads to breakage in another.View theResourcespage for information on some of the fixes available. Full browser compliance isstill sometimes a pipe dream, and we do not expect you to come up with pixel-perfectcode across every platform. But do test in as many as you can. If your design doesn’twork in at least IE5+/Win and Mozilla (run by over 90% of the population), chancesare we won’t accept it.

We ask that you submit original artwork. Please respect copyright laws. Please keepobjectionable material to a minimum; tasteful nudity is acceptable, outright pornographywill be rejected.

This is a learning exercise as well as a demonstration. You retain full copyrighton your graphics (with limited exceptions, seesubmission guidelines), but we ask you release yourCSSunder a Creative Commons license identical to theone on this siteso that others may learn from your work.

Bandwidth graciously donated byDreamFire Studios

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
first()
elem = $('div').first();
pending…
:first
elem = $('div:first');
pending…
.eq(0)
elem = $('div').eq(0);
pending…
:eq(0)
elem = $('div:eq(0)');
pending…
[0]
elem = $('div')[0];
pending…
$([0])
elem = $($('div')[0]);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment