finding external links

JavaScript performance comparison

Revision 7 of this test case created

Preparation code

<a href="http://google.com" rel="external">google</a>
<a href="apage.html">a page</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="header"><a tabindex="1" href="#content" id="jumpToContent">jump to content</a><div id="sr-header-area"><div class="width-clip"><div class="dropdown srdrop " onclick="open_menu(this)" onmouseover="hover_open_menu(this)"><span class="selected title">my reddits</span></div><div class="drop-choices srdrop "><a href="http://www.reddit.com/r/Android/" class="choice " >Android</a><a href="http://www.reddit.com/r/announcements/" class="choice " >announcements</a><a href="http://www.reddit.com/r/Art/" class="choice " >Art</a><a href="http://www.reddit.com/r/AskReddit/" class="choice " >AskReddit</a><a href="http://www.reddit.com/r/bachelorchef/" class="choice " >bachelorchef</a><a href="http://www.reddit.com/r/bestof/" class="choice " >bestof</a><a href="http://www.reddit.com/r/blog/" class="choice " >blog</a><a href="http://www.reddit.com/r/Buffalo/" class="choice " >Buffalo</a><a href="http://www.reddit.com/r/business/" class="choice " >business</a><a href="http://www.reddit.com/r/cogsci/" class="choice " >cogsci</a><a href="http://www.reddit.com/r/comics/" class="choice " >comics</a><a href="http://www.reddit.com/r/DIY/" class="choice " >DIY</a><a href="http://www.reddit.com/r/fffffffuuuuuuuuuuuu/" class="choice " >fffffffuuuuuuuuuuuu</a><a href="http://www.reddit.com/r/Fitness/" class="choice " >Fitness</a><a href="http://www.reddit.com/r/funny/" class="choice " >funny</a><a href="http://www.reddit.com/r/gadgets/" class="choice " >gadgets</a><a href="http://www.reddit.com/r/gaming/" class="choice " >gaming</a><a href="http://www.reddit.com/r/geek/" class="choice " >geek</a><a href="http://www.reddit.com/r/GetMotivated/" class="choice " >GetMotivated</a><a href="http://www.reddit.com/r/happy/" class="choice " >happy</a><a href="http://www.reddit.com/r/hockey/" class="choice " >hockey</a><a href="http://www.reddit.com/r/IAmA/" class="choice " >IAmA</a><a href="http://www.reddit.com/r/math/" class="choice " >math</a><a href="http://www.reddit.com/r/netsec/" class="choice " >netsec</a><a href="http://www.reddit.com/r/offbeat/" class="choice " >offbeat</a><a href="http://www.reddit.com/r/pics/" class="choice " >pics</a><a href="http://www.reddit.com/r/programming/" class="choice " >programming</a><a href="http://www.reddit.com/r/reddit.com/" class="choice " >reddit.com</a><a href="http://www.reddit.com/r/redditdev/" class="choice " >redditdev</a><a href="http://www.reddit.com/r/sabres/" class="choice " >sabres</a><a href="http://www.reddit.com/r/science/" class="choice " >science</a><a href="http://www.reddit.com/r/self/" class="choice " >self</a><a href="http://www.reddit.com/r/sports/" class="choice " >sports</a><a href="http://www.reddit.com/r/technology/" class="choice " >technology</a><a href="http://www.reddit.com/r/todayilearned/" class="choice " >todayilearned</a><a href="http://www.reddit.com/r/videos/" class="choice " >videos</a><a href="http://www.reddit.com/r/web_design/" class="choice " >web_design</a><a href="http://www.reddit.com/r/webdev/" class="choice " >webdev</a><a href="http://www.reddit.com/r/worldnews/" class="choice " >worldnews</a><a href="http://www.reddit.com/r/WTF/" class="choice " >WTF</a><a href="http://www.reddit.com/reddits/" class="choice bottom-option" >edit subscriptions</a></div><div class="sr-list"><ul class="flat-list sr-bar hover" ><li ><a href="http://www.reddit.com/r/all/" >all</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/random/" >random</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/friends/" >friends</a></li></ul><span class="separator">&nbsp;|&nbsp;</span><ul class="flat-list sr-bar hover" ><li ><a href="http://www.reddit.com/r/pics/" >pics</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/funny/" >funny</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/gaming/" >gaming</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/AskReddit/" >AskReddit</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/worldnews/" >worldnews</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/videos/" >videos</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/IAmA/" >IAmA</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/todayilearned/" >todayilearned</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/WTF/" >WTF</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/technology/" >technology</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/science/" >science</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/bestof/" >bestof</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/fffffffuuuuuuuuuuuu/" >fffffffuuuuuuuuuuuu</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/comics/" >comics</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Android/" >Android</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/offbeat/" >offbeat</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/hockey/" >hockey</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/geek/" >geek</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Fitness/" >Fitness</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/GetMotivated/" >GetMotivated</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/programming/" >programming</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Art/" >Art</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/sports/" >sports</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/DIY/" >DIY</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/self/" >self</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/business/" >business</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/happy/" >happy</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/math/" >math</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/gadgets/" >gadgets</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/netsec/" >netsec</a></li><li class='selected'><span class="separator">-</span><a href="http://www.reddit.com/r/web_design/" >web_design</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/webdev/" >webdev</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/reddit.com/" >reddit.com</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/cogsci/" >cogsci</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Buffalo/" >Buffalo</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/bachelorchef/" >bachelorchef</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/sabres/" >sabres</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/redditdev/" >redditdev</a></li></ul><span class="separator">&nbsp;&ndash;&nbsp;</span><ul class="flat-list sr-bar hover" id='sr-bar'><li ><a href="http://www.reddit.com/r/politics/" >politics</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/aww/" >aww</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/atheism/" >atheism</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/AdviceAnimals/" >AdviceAnimals</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Music/" >Music</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/askscience/" >askscience</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/movies/" >movies</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/trees/" >trees</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/mylittlepony/" >mylittlepony</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Minecraft/" >Minecraft</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/gifs/" >gifs</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/pokemon/" >pokemon</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/circlejerk/" >circlejerk</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/starcraft/" >starcraft</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/4chan/" >4chan</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/masseffect/" >masseffect</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/skyrim/" >skyrim</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/doctorwho/" >doctorwho</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/leagueoflegends/" >leagueoflegends</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/battlefield3/" >battlefield3</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/gentlemanboners/" >gentlemanboners</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/LadyBoners/" >LadyBoners</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/tf2/" >tf2</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/firstworldproblems/" >firstworldproblems</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/EarthPorn/" >EarthPorn</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/ronpaul/" >ronpaul</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/guns/" >guns</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/soccer/" >soccer</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/reactiongifs/" >reactiongifs</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/Libertarian/" >Libertarian</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/nba/" >nba</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/news/" >news</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/canada/" >canada</a></li><li ><span class="separator">-</span><a href="http://www.reddit.com/r/cats/" >cats</a></li></ul></div><a href="http://www.reddit.com/reddits/" id="sr-more-link" >edit &raquo;</a></div></div><div id="header-bottom-left"><a href="http://www.reddit.com/" id="header-img-a" ><img id='header-img' src="http://thumbs.reddit.com/t5_2qh1m.png?v=3a6b2bc6d56e3e6ef581bb8cfbd130ed" alt="web_design"/></a>&nbsp;<span class="hover pagename redditname"><a href="http://www.reddit.com/r/web_design/" >web_design</a></span><ul class="tabmenu " ><li class='selected'><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/" >comments</a></li><li ><a href="http://www.reddit.com/r/web_design/related/qrky3/wich_jquery_selector_is_the_most_efficient_when/" >related</a></li></ul></div><div id="header-bottom-right"><span class="user"><a href="http://www.reddit.com/user/equallyunequal/" >equallyunequal</a>&nbsp;(<b>1</b>)</span><span class="separator">|</span><a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail" >messages</a><span class="separator">|</span><ul class="flat-list hover" ><li ><a href="http://www.reddit.com/prefs/" class="pref-lang" >preferences</a></li></ul><span class="separator">|</span><form method="post" action="/logout" class="logout hover" ><input type="hidden" name="uh" value="7b6h7792xq4633285a162ce64a172bac9c33656241f3b0194c"/><input type="hidden" name="top" value="off"/><a href="javascript:void(0)" onclick="$(this).parent().submit()" >logout</a></form></div></div><div class="side"><div class='spacer'><form action="http://www.reddit.com/r/web_design/search" id="search"><input type="text" name="q" placeholder="search reddit" /><div id="searchexpando" class="infobar"><label><input type="checkbox" name="restrict_sr" />limit my search to /r/web_design</label><div id="moresearchinfo"><p>use the following search parameters to narrow your results:</p><dl><dt>reddit:{name}</dt><dd>find things posted in {name} only</dd><dt>author:{username}</dt><dd>return things submitted by {username} only</dd><dt>site:{domain}</dt><dd>get links to pages on {domain} only</dd><dt>url:{text}</dt><dd>search for {text} in url</dd><dt>selftext:{text}</dt><dd>search for {text} in self post contents</dd><dt>is_self:{yes|no}</dt><dd>include or exclude self posts</dd><dt>over18:{yes|no}</dt><dd>include or exclude results from nsfw reddits</dd></dl><p>e.g.<code>reddit:pics site:imgur.com dog</code></p><p><a href="http://www.reddit.com/help/search">see the search faq for details.</a></p></div><p><a href="http://www.reddit.com/help/search" id="search_showmore">advanced search: by author, community...</a></p></div></form></div><div class='spacer'><div class="linkinfo"><div class="date"><span>this post was submitted on &#32;</span><time datetime="2012-03-11T15:49:02.997107+00:00">11 Mar 2012</time></div><div class="score"><span class='number'>42</span>&#32;<span class='word'>points</span>&#32;(82% like it)</div><span class="upvotes"><span class='number'>53</span>&#32;<span class='word'>up votes</span></span>&#32;<span class="downvotes"><span class='number'>11</span>&#32;<span class='word'>down votes</span></span><div class="shortlink">shortlink: &#32;<input type="text" value="http://redd.it/qrky3" readonly="readonly" id="shortlink-text" /></div><table></table></div></div><div class='spacer'></div><div class='spacer'><div class="titlebox"><h1 class="hover redditname"><a href="http://www.reddit.com/r/web_design/" class="hover" >web_design</a></h1><span class="fancy-toggle-button toggle" style=""><a class="option active remove login-required" href="#" tabindex="100" onclick="return toggle(this, unsubscribe('t5_2qh1m'), subscribe('t5_2qh1m'))" >unsubscribe</a><a class="option add" href="#">subscribe</a></span><span class='number'>42,896</span>&#32;<span class='word'>readers</span><form class="toggle flairtoggle"><input id="flair_enabled" type="checkbox" name="flair_enabled" checked="checked" >Show my flair on this reddit. It looks like:</form><div class="tagline"><a href="http://www.reddit.com/user/equallyunequal" class="author id-t2_yli1" >equallyunequal</a><span class="userattrs"></span></div><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t5_2qh1m3m3"><input type="hidden" name="thing_id" value="t5_2qh1m"/><div class="usertext-body"><div class="md"><p><strong><a href="http://www.reddit.com/r/web_design/comments/pi4gh/common_web_design_development_tools/">Common Dev Tools</a></strong></p>

<p>Topics related to web design: HTML, CSS, JS, layout, UI, graphics, etc.</p>

<p><strong>Related reddits:</strong><br/>
<a href="http://www.reddit.com/r/design_critiques/">/r/design_critiques</a><br/>
<a href="http://www.reddit.com/r/webdev">/r/webdev</a><br/>
<a href="http://www.reddit.com/r/wordpress">/r/wordpress</a><br/>
<a href="http://www.reddit.com/r/design">/r/design</a><br/>
<a href="http://www.reddit.com/r/javascript">/r/javascript</a><br/>
<a href="http://www.reddit.com/r/php">/r/php</a><br/>
<a href="http://www.reddit.com/r/webhosting/">/r/webhosting</a></p>

<p><strong>Want to talk about web design?</strong><br/>
<a href="irc://irc.freenode.net:6777/#reddit-webdesign">irc://irc.freenode.net:6777/#reddit-webdesign</a></p>

<p><strong>Looking for a job, or want to hire a redditor?</strong><br/>
<a href="http://www.reddit.com/r/forhire">/r/forhire</a></p>

<p><em>ps: thanks to <a href="http://www.reddit.com/user/Pajamasofwrath">pajamasofwrath</a> for the excellent logo!</em></p>
</div>
</div></form><div class="bottom"><span class="age">a community for&#32;<time title="Fri Jan 25 04:05:21 2008 UTC" datetime="2008-01-24T21:05:21.699833-07:00">4 years</time></span></div><div class="clear"></div></div></div><div class='spacer'><iframe id="ad-frame" frameborder="0" scrolling="no" name="ad-frame" src="http://www.redditmedia.com/ads/r/web_design/"></iframe><script type="text/javascript">$(function() { var ad = $("#ad-frame"); if(!ad.length || ad.height() == 0 || ad.width() == 0 || ad.offset().left == 0) { $(".footer").append("<img alt='' src='http://pixel.redditmedia.com/pixel/of_defenestration.png?hash=0e31bc319d5b5882b0cddf147f4ce1da5ac9c731&id=adblock&random=" + Math.random()*10000000000000000 + "'/>"); } });</script></div><div class='spacer'><div class="sidebox submit"><div class="morelink"><a href="http://www.reddit.com/r/web_design/submit" class="login-required" >Submit a link</a><div class="nub"></div></div><div class="spacer"><a href="http://www.reddit.com/r/web_design/submit" class="login-required" ></a><div class="subtitle">to anything interesting: news article, blog entry, video, picture...</div></div></div></div><div class='spacer'><div class="sidecontentbox "><a class="helplink" href="/message/compose?to=%2Fr%2Fweb_design">message the moderators</a><h1>MODERATORS</h1><ul class="content"><li><a href="http://www.reddit.com/user/qgyh2" class="author id-t2_1uzpp" >qgyh2</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/kn0thing" class="author id-t2_1wh0" >kn0thing</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/Poromenos" class="author id-t2_1pd6" >Poromenos</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/jemka" class="author id-t2_345c2" >jemka</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/sylvan" class="author id-t2_1nb0r" >sylvan</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/krispykrackers" class="author id-t2_35gvu" >krispykrackers</a><span class="userattrs"></span></li><li><a href="http://www.reddit.com/user/maxwellhill" class="author id-t2_2yqt" >maxwellhill</a><span class="userattrs"></span></li></ul></div></div><div class='spacer'><div class="sidecontentbox "><h1>RECENTLY VIEWED LINKS</h1><ul class="content"><li><div class="gadget"><div class="click-gadget"><div ><div class="reddit-link even first-half thing id-t3_qrky3"><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('705d8a571db4f3eb3a408863e345db1fb3e11427', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('705d8a571db4f3eb3a408863e345db1fb3e11427', null, event)" ></div></div><div class="reddit-entry entry unvoted" ><a href="/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/" class="reddit-link-title" >Wich jQuery selector is the most efficient when you have a high number of elements.</a><br /><small ><span class="score unvoted">44 points</span>&#32;|&#32;<a class="reddit-comment-link" href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/">22 comments</a></small></div><div class="reddit-link-end" ><!--IE6sux--></div></div><div class="reddit-link odd first-half thing id-t3_qrzsf"><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('b725de7a541f2db00ac9125192232948aef03915', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('b725de7a541f2db00ac9125192232948aef03915', null, event)" ></div></div><div class="reddit-entry entry unvoted" ><a href="/r/self/comments/qrzsf/i_proposed_and_it_was_great/" class="reddit-link-title" >I proposed, and it was great</a><br /><small ><span class="score unvoted">101 points</span>&#32;|&#32;<a class="reddit-comment-link" href="http://www.reddit.com/r/self/comments/qrzsf/i_proposed_and_it_was_great/">10 comments</a></small></div><div class="reddit-link-end" ><!--IE6sux--></div></div><div class="reddit-link even first-half thing id-t3_qrju5"><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('3d7eedb03f2340ea653223e44582ecbd2328a4f9', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('3d7eedb03f2340ea653223e44582ecbd2328a4f9', null, event)" ></div></div><div class="reddit-entry entry unvoted" ><a href="http://groups.google.com/group/comp.programming.threads/msg/d835f2f6ef8aed99?hl=en&amp;pli=1" class="reddit-link-title" >why does POSIX have recursive mutexes? Because of a dare.</a><br /><small ><span class="score unvoted">237 points</span>&#32;|&#32;<a class="reddit-comment-link" href="http://www.reddit.com/r/programming/comments/qrju5/why_does_posix_have_recursive_mutexes_because_of/">102 comments</a></small></div><div class="reddit-link-end" ><!--IE6sux--></div></div><div class="reddit-link odd second-half thing id-t3_qrobo"><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('7ae59a88dc3edb20f3a0a1a1b0f1954bf2c8550b', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('7ae59a88dc3edb20f3a0a1a1b0f1954bf2c8550b', null, event)" ></div></div><div class="reddit-entry entry unvoted" ><a href="http://www.reddit.com/r/TrueReddit/comments/qrh1u/reddit_i_couldnt_sleep_last_night_because_of_you/c3zvg78" class="reddit-link-title" >i_like_jam recounts the various ways Reddit users' trust has been violated in the past three years</a><br /><small ><span class="score unvoted">486 points</span>&#32;|&#32;<a class="reddit-comment-link" href="http://www.reddit.com/r/bestof/comments/qrobo/i_like_jam_recounts_the_various_ways_reddit_users/">68 comments</a></small></div><div class="reddit-link-end" ><!--IE6sux--></div></div><div class="reddit-link even second-half thing id-t3_qrys2"><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('1092275d313cd2aeea6309ac435511466258bb8e', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('1092275d313cd2aeea6309ac435511466258bb8e', null, event)" ></div></div><div class="reddit-entry entry unvoted" ><a href="http://www.youtube.com/watch?v=EPiRig6sYJo" class="reddit-link-title" >Colorado HS 5A basketball final.</a><br /><small ><span class="score unvoted">96 points</span>&#32;|&#32;<a class="reddit-comment-link" href="http://www.reddit.com/r/sports/comments/qrys2/colorado_hs_5a_basketball_final/">29 comments</a></small></div><div class="reddit-link-end" ><!--IE6sux--></div></div></div></div><div class="right"><a class="" href="javascript:void(0)" onclick="return clear_clicked_items(this)">clear</a></div></div></li></ul></div></div><div class='spacer'><div class="account-activity-box"><p><a href="/account-activity">account activity</a></p></div></div></div><a name="content"></a><div class="content"><div id="siteTable" class="sitetable linklisting"><div class=" thing id-t3_qrky3 odd compressed link self" data-fullname="t3_qrky3" onclick="click_thing(this)"><p class="parent"></p><span class="rank" style="width:0px;display:none;">1</span><div class="midcol unvoted" style="width:2ex;" ><div class="arrow up login-required" onclick="$(this).vote('705d8a571db4f3eb3a408863e345db1fb3e11427', null, event)" ></div><div class="score-placeholder"></div><div class="arrow down login-required" onclick="$(this).vote('705d8a571db4f3eb3a408863e345db1fb3e11427', null, event)" ></div></div><div class="entry unvoted"><p class="title"><a class="title loggedin " href="/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/" >Wich jQuery selector is the most efficient when you have a high number of elements.</a>&#32;<span class="domain">(<a href="http://www.reddit.com/r/web_design/" >self.web_design</a>)</span></p><p class="tagline"><span><span class="score dislikes">41 points</span><span class="score unvoted">42 points</span><span class="score likes">43 points</span>&#32;submitted&#32;<time title="Sun Mar 11 15:49:02 2012 UTC" datetime="2012-03-11T15:49:02.997107+00:00">9 hours</time>&#32;ago</span>&#32;<span>by&#32;<a href="http://www.reddit.com/user/OnderString" class="author id-t2_757ft" >OnderString</a><span class="userattrs"></span></span></p><div class="expando" ><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t3_qrky39ab"><input type="hidden" name="thing_id" value="t3_qrky3"/><div class="usertext-body"><div class="md"><p>$(&#39;a[rel=&quot;external&quot;]&#39;);
$(&#39;[rel=&quot;external&quot;]&#39;).filter(&#39;a&#39;);
$(&#39;a&#39;).filter(&#39;[rel=external]&#39;);</p>

<p>Thanks in advance</p>
</div>
</div></form></div><ul class="flat-list buttons"><li class="first"><a class="comments" href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/" target="_parent" >22 comments</a></li><li class="share"><span class="share-button toggle" style=""><a class="option active login-required" href="#" tabindex="100" onclick="return toggle(this, share, cancelShare)" >share</a><a class="option " href="#">cancel</a></span></li><li><form action="/post/save" method="post" class="state-button save-button"><input type="hidden" name="executed" value="saved" /><span><a href="javascript:void(0)" onclick="return change_state(this, 'save', save_thing);">save</a></span></form></li><li><form action="/post/hide" method="post" class="state-button hide-button"><input type="hidden" name="executed" value="hidden" /><span><a href="javascript:void(0)" onclick="change_state(this, 'hide', hide_thing);">hide</a></span></form></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li></ul></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div><div class='commentarea'><div class="panestack-title"><span class="title">all 22 comments</span></div><div class="menuarea"><div class="spacer"><span class="dropdown-title lightdrop ">sorted by:&#32;</span><div class="dropdown lightdrop " onclick="open_menu(this)" onmouseover="hover_open_menu(this)"><span class="selected">best</span></div><div class="drop-choices lightdrop "><form method="POST" action="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/"><input type="hidden" name="sort" value="hot"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/?sort=hot" class="choice " onclick="$(this).parent().submit(); return false;" >hot</a></form><form method="POST" action="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/"><input type="hidden" name="sort" value="new"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/?sort=new" class="choice " onclick="$(this).parent().submit(); return false;" >new</a></form><form method="POST" action="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/"><input type="hidden" name="sort" value="controversial"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/?sort=controversial" class="choice " onclick="$(this).parent().submit(); return false;" >controversial</a></form><form method="POST" action="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/"><input type="hidden" name="sort" value="top"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/?sort=top" class="choice " onclick="$(this).parent().submit(); return false;" >top</a></form><form method="POST" action="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/"><input type="hidden" name="sort" value="old"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/?sort=old" class="choice " onclick="$(this).parent().submit(); return false;" >old</a></form></div></div></div><form onsubmit="return post_form(this, 'share')" method="post" id="sharelink_" class="pretty-form sharelink" action="/post/share" style='display:none'><div class="clearleft"><!--IEsux--></div><span class="error RATELIMIT field-ratelimit" style="display:none"></span><input type="hidden" name="parent" value=""/><table class="sharetable preftable"><tr class=""><th><label for="share_to_">send this link to</label></th><td><textarea id="share_to_" name="share_to" rows="4" cols="40"></textarea></td><td class="share-to-errors"><span class="error BAD_EMAILS field-share_to" style="display:none"></span><span class="error TOO_MANY_EMAILS field-share_to" style="display:none"></span><span class="error NO_EMAILS field-share_to" style="display:none"></span></td></tr><tr><th><label for="share_from_">your name</label>&nbsp;<span class="little gray">(optional)</span></th><td><input class="real-name" value="equallyunequal" type="text" id="share_from_" name="share_from" /></td><td class="share-from-errors"><span class="error TOO_LONG field-share_from" style="display:none"></span></td></tr><tr><th><label for="replyto_">your email</label>&nbsp;<span class="little gray">(optional)</span></th><td><input name="replyto" type="text" size="30" id="replyto_" value=""/></td><td class="reply-to-errors"><span class="error BAD_EMAILS field-replyto" style="display:none"></span><span class="error TOO_MANY_EMAILS field-replyto" style="display:none"></span></td></tr><tr><th><label for="message_">message</label>&nbsp;<span class="little gray">(optional)</span></th><td><textarea id="message_" name="message" rows="4" cols="40">equallyunequal from http://reddit.com/ has shared a link with you.</textarea></td><td class="message-errors"><span class="error TOO_LONG field-message" style="display:none"></span></td></tr><tr><td></td><td><input name="iden" value="" type="hidden"/><img class="capimage" alt="i wonder if these things even work" src="http://www.redditstatic.com/kill.png" /></td></tr><tr><td align="right"><label for="captcha_">human?</label></td><td><input class="captcha cap-text" id="captcha_" name="captcha" type="text" size="30" placeholder="type the letters from the image above" /></td><td><span class="error BAD_CAPTCHA field-captcha" style="display:none"></span></td></tr><tr><td></td><td><button type="submit" class="btn">share</button><button class="btn" onclick="return cancelShare(this);">cancel</button><span class="status error"></span></td><td></td></tr></table></form><form action="#" class="usertext cloneable" onsubmit="return post_form(this, 'comment')" id="form-t3_qrky3tps"><input type="hidden" name="thing_id" value="t3_qrky3"/><div class="usertext-edit" style=""><div><textarea rows="1" cols="1" name="text" ></textarea></div><div class="bottom-area"><span class="help-toggle toggle" style=""><a class="option active " href="#" tabindex="100" onclick="return toggle(this, helpon, helpoff)" >formatting help</a><a class="option " href="#">hide help</a></span><span class="error TOO_LONG field-text" style="display:none"></span><span class="error RATELIMIT field-ratelimit" style="display:none"></span><span class="error NO_TEXT field-text" style="display:none"></span><span class="error TOO_OLD field-parent" style="display:none"></span><span class="error DELETED_COMMENT field-parent" style="display:none"></span><span class="error DELETED_LINK field-parent" style="display:none"></span><span class="error USER_BLOCKED field-parent" style="display:none"></span><div class="usertext-buttons"><button type="submit" onclick="" class="save" >save</button><button type="button" onclick="cancel_usertext(this)" class="cancel" style='display:none'>cancel</button><span class="status"></span></div></div><table class="markhelp md" style="display: none"><tr style="background-color: #ffff99; text-align: center"><td><em>you type:</em></td><td><em>you see:</em></td></tr><tr><td>*italics*</td><td><em>italics</em></td></tr><tr><td>**bold**</td><td><b>bold</b></td></tr><tr><td>[reddit!](http://reddit.com)</td><td><a href="http://reddit.com">reddit!</a></td></tr><tr><td>* item 1<br/>* item 2<br/>* item 3</td><td><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul></td></tr><tr><td>&gt; quoted text</td><td><blockquote>quoted text</blockquote></td></tr><tr><td>Lines starting with four spaces<br/>are treated like code:<br/><br/><span class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</span>if 1 * 2 &lt 3:<br/><span class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>print "hello, world!"<br/></td><td>Lines starting with four spaces<br/>are treated like code:<br/><pre>if 1 * 2 &lt 3:<br/>&nbsp;&nbsp;&nbsp;&nbsp;print "hello, world!"</pre></td></tr><tr><td>~~strikethrough~~</td><td><strike>strikethrough</strike></td></tr><tr><td>super^script</td><td>super<sup>script</sup></td></tr></table></div></form><div id="siteTable_t3_qrky3" class="sitetable nestedlisting"><div class="thing id-t1_c3zvofu odd comment " data-fullname="t1_c3zvofu" onclick="click_thing(this)"><p class="parent"><a name="c3zvofu" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/sleesechice" class="author gray id-t2_6k2l3" >sleesechice</a><span class="userattrs"></span>&#32;<span class="score dislikes">60 points</span><span class="score unvoted">61 points</span><span class="score likes">62 points</span>&#32;<time title="Sun Mar 11 16:07:11 2012 UTC" datetime="2012-03-11T16:07:11.566070+00:00">9 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(9 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/sleesechice" class="author id-t2_6k2l3" >sleesechice</a><span class="userattrs"></span>&#32;<span class="score dislikes">60 points</span><span class="score unvoted">61 points</span><span class="score likes">62 points</span>&#32;<time title="Sun Mar 11 16:07:11 2012 UTC" datetime="2012-03-11T16:07:11.566070+00:00">9 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zvofunqv"><input type="hidden" name="thing_id" value="t1_c3zvofu"/><div class="usertext-body"><div class="md"><p>so i <a href="http://jsperf.com/finding-external-links">made this</a> for you.</p>

<p>have fun</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zvofu" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zvofu" class="sitetable listing"><div class="thing id-t1_c3zvpze odd comment " data-fullname="t1_c3zvpze" onclick="click_thing(this)"><p class="parent"><a name="c3zvpze" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/Brandon0" class="author gray id-t2_4709z" >Brandon0</a><span class="userattrs"></span>&#32;<span class="score dislikes">13 points</span><span class="score unvoted">14 points</span><span class="score likes">15 points</span>&#32;<time title="Sun Mar 11 16:12:57 2012 UTC" datetime="2012-03-11T16:12:57.004944+00:00">9 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(3 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/Brandon0" class="author id-t2_4709z" >Brandon0</a><span class="userattrs"></span>&#32;<span class="score dislikes">13 points</span><span class="score unvoted">14 points</span><span class="score likes">15 points</span>&#32;<time title="Sun Mar 11 16:12:57 2012 UTC" datetime="2012-03-11T16:12:57.004944+00:00">9 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zvpzen3f"><input type="hidden" name="thing_id" value="t1_c3zvpze"/><div class="usertext-body"><div class="md"><p>Wow, I&#39;m shocked #2 was faster than #3.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zvpze" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofu" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zvpze" class="sitetable listing"><div class="thing id-t1_c3zw3wv even comment " data-fullname="t1_c3zw3wv" onclick="click_thing(this)"><p class="parent"><a name="c3zw3wv" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/x-skeww" class="author gray id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">4 points</span><span class="score unvoted">5 points</span><span class="score likes">6 points</span>&#32;<time title="Sun Mar 11 17:02:07 2012 UTC" datetime="2012-03-11T17:02:07.061232+00:00">8 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/x-skeww" class="author id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">4 points</span><span class="score unvoted">5 points</span><span class="score likes">6 points</span>&#32;<time title="Sun Mar 11 17:02:07 2012 UTC" datetime="2012-03-11T17:02:07.061232+00:00">8 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zw3wvu6r"><input type="hidden" name="thing_id" value="t1_c3zw3wv"/><div class="usertext-body"><div class="md"><blockquote>
<p>#2 was faster than #3</p>
</blockquote>

<p>With a completely unrealistic DOM, yes.</p>

<p>If you use one which is similar to reddit&#39;s, #3 is the fastest, #1 is slower, and #2 is way slower.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zw3wv" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvpze" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zvs5p even comment " data-fullname="t1_c3zvs5p" onclick="click_thing(this)"><p class="parent"><a name="c3zvs5p" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/celtric" class="author gray id-t2_3ahly" >celtric</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 16:20:47 2012 UTC" datetime="2012-03-11T16:20:47.553285+00:00">9 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/celtric" class="author id-t2_3ahly" >celtric</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 16:20:47 2012 UTC" datetime="2012-03-11T16:20:47.553285+00:00">9 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zvs5pnho"><input type="hidden" name="thing_id" value="t1_c3zvs5p"/><div class="usertext-body"><div class="md"><p>Same here. Why is that? I thought you had to traverse every single element looking for that specific attribute (at least in IE).</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zvs5p" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvpze" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zvs5p" class="sitetable listing"><div class="thing id-t1_c3zxb3i odd comment " data-fullname="t1_c3zxb3i" onclick="click_thing(this)"><p class="parent"><a name="c3zxb3i" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/9jack9" class="author gray id-t2_dsg5" >9jack9</a><span class="userattrs"></span>&#32;<span class="score dislikes">4 points</span><span class="score unvoted">5 points</span><span class="score likes">6 points</span>&#32;<time title="Sun Mar 11 19:20:11 2012 UTC" datetime="2012-03-11T19:20:11.880723+00:00">6 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/9jack9" class="author id-t2_dsg5" >9jack9</a><span class="userattrs"></span>&#32;<span class="score dislikes">4 points</span><span class="score unvoted">5 points</span><span class="score likes">6 points</span>&#32;<time title="Sun Mar 11 19:20:11 2012 UTC" datetime="2012-03-11T19:20:11.880723+00:00">6 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zxb3ikfr"><input type="hidden" name="thing_id" value="t1_c3zxb3i"/><div class="usertext-body"><div class="md"><p>Because jQuery is smart enough to use querySelectorAll for this example. If you tried it in IE6/7 you would get very different results.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zxb3i" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvs5p" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zw2b2 even comment " data-fullname="t1_c3zw2b2" onclick="click_thing(this)"><p class="parent"><a name="c3zw2b2" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/hupcapstudios" class="author gray id-t2_3fwtz" >hupcapstudios</a><span class="userattrs"></span>&#32;<span class="score dislikes">8 points</span><span class="score unvoted">9 points</span><span class="score likes">10 points</span>&#32;<time title="Sun Mar 11 16:56:33 2012 UTC" datetime="2012-03-11T16:56:33.993497+00:00">8 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/hupcapstudios" class="author id-t2_3fwtz" >hupcapstudios</a><span class="userattrs"></span>&#32;<span class="score dislikes">8 points</span><span class="score unvoted">9 points</span><span class="score likes">10 points</span>&#32;<time title="Sun Mar 11 16:56:33 2012 UTC" datetime="2012-03-11T16:56:33.993497+00:00">8 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zw2b2922"><input type="hidden" name="thing_id" value="t1_c3zw2b2"/><div class="usertext-body"><div class="md"><p>This is awesome.  HOWEVER, this might not be a good representation of a real world model considering we&#39;re likely to have several more &#39;a&#39; nodes in the DOM.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zw2b2" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofu" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zw2b2" class="sitetable listing"><div class="thing id-t1_c3zw52n even comment " data-fullname="t1_c3zw52n" onclick="click_thing(this)"><p class="parent"><a name="c3zw52n" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/sleesechice" class="author gray id-t2_6k2l3" >sleesechice</a><span class="userattrs"></span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 17:05:57 2012 UTC" datetime="2012-03-11T17:05:57.959962+00:00">8 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/sleesechice" class="author id-t2_6k2l3" >sleesechice</a><span class="userattrs"></span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 17:05:57 2012 UTC" datetime="2012-03-11T17:05:57.959962+00:00">8 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zw52nc44"><input type="hidden" name="thing_id" value="t1_c3zw52n"/><div class="usertext-body"><div class="md"><p>I agree it might not be... but then in the real world we would all filter our selectors with an id first eh? so we wouldn&#39;t traverse the entire dom.</p>

<p>If you feel the need to, you could re-run the tests with your filtered portion of the document. It would be a more interesting test case for sure.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zw52n" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zw2b2" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zw1fo odd comment " data-fullname="t1_c3zw1fo" onclick="click_thing(this)"><p class="parent"><a name="c3zw1fo" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/andytuba" class="author gray id-t2_4sff0" >andytuba</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 16:53:29 2012 UTC" datetime="2012-03-11T16:53:29.347307+00:00">8 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/andytuba" class="author id-t2_4sff0" >andytuba</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 16:53:29 2012 UTC" datetime="2012-03-11T16:53:29.347307+00:00">8 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zw1fozwm"><input type="hidden" name="thing_id" value="t1_c3zw1fo"/><div class="usertext-body"><div class="md"><p>Moral of the story: don&#39;t pre-optimize; wait for data!</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zw1fo" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofu" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zvsk4 odd comment " data-fullname="t1_c3zvsk4" onclick="click_thing(this)"><p class="parent"><a name="c3zvsk4" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/OnderString" class="author gray submitter id-t2_757ft" >OnderString</a><span class="userattrs">[<a class="submitter" title="submitter" href="/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/">S</a>]</span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 16:22:23 2012 UTC" datetime="2012-03-11T16:22:23.655434+00:00">9 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/OnderString" class="author submitter id-t2_757ft" >OnderString</a><span class="userattrs">[<a class="submitter" title="submitter" href="/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/">S</a>]</span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 16:22:23 2012 UTC" datetime="2012-03-11T16:22:23.655434+00:00">9 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zvsk46bb"><input type="hidden" name="thing_id" value="t1_c3zvsk4"/><div class="usertext-body"><div class="md"><p>Wow, that was amazing! thanks a lot.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zvsk4" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofu" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zy0l4 odd comment " data-fullname="t1_c3zy0l4" onclick="click_thing(this)"><p class="parent"><a name="c3zy0l4" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/matchu" class="author gray id-t2_3ea4c" >matchu</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 20:34:14 2012 UTC" datetime="2012-03-11T20:34:14.834838+00:00">5 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/matchu" class="author id-t2_3ea4c" >matchu</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 20:34:14 2012 UTC" datetime="2012-03-11T20:34:14.834838+00:00">5 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zy0l4q09"><input type="hidden" name="thing_id" value="t1_c3zy0l4"/><div class="usertext-body"><div class="md"><p>Neat! Point of curiosity: why does this page use a Java applet? The tests seemed to run fine without it :/</p>

<p>edit: never mind, <a href="http://jsperf.com/faq#java-applet" rel="nofollow">found it</a></p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zy0l4" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofu" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zwpjw even comment " data-fullname="t1_c3zwpjw" onclick="click_thing(this)"><p class="parent"><a name="c3zwpjw" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/eligundry" class="author gray id-t2_4jm6b" >eligundry</a><span class="userattrs"></span>&#32;<span class="score dislikes">13 points</span><span class="score unvoted">14 points</span><span class="score likes">15 points</span>&#32;<time title="Sun Mar 11 18:12:54 2012 UTC" datetime="2012-03-11T18:12:54.654293+00:00">7 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/eligundry" class="author id-t2_4jm6b" >eligundry</a><span class="userattrs"></span>&#32;<span class="score dislikes">13 points</span><span class="score unvoted">14 points</span><span class="score likes">15 points</span>&#32;<time title="Sun Mar 11 18:12:54 2012 UTC" datetime="2012-03-11T18:12:54.654293+00:00">7 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zwpjwszy"><input type="hidden" name="thing_id" value="t1_c3zwpjw"/><div class="usertext-body"><div class="md"><p>At the very least, I&#39;d root at selector with an element/ID, like so:</p>

<pre><code>$(&#39;#wrapper&#39;).find(&#39;a[rel=external]&#39;);
</code></pre>

<p>This is because the first selector uses the built in JS getElementByID and throws the rest at the Sizzle engine, which is a lot slower. Anyway to make the list of elements parsed is a good thing.</p>

<p>I can only assume that you will be attaching some sort of event listener to this link, so you should be sure to check out <a href="http://api.jquery.com/on/">.on</a>, which will significantly reduce the amount of overhead for a lot of event listeners. The syntax looks like this:</p>

<pre><code>$(&#39;#wrapper&#39;).on(&quot;click&quot;, &quot;a[rel=external&quot;, function() { // code here});
</code></pre>

<p>Let&#39;s say you had 100 external links and you wanted to attach an event to them. If you went with your selectors with the click function, you&#39;d have 100 event listeners. With the code above, you have but one. </p>

<p>Also, if you&#39;re going to be using it more than once, be sure to cache it in a variable. </p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zwpjw" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zwpjw" class="sitetable listing"><div class="thing id-t1_c3zx12y even comment " data-fullname="t1_c3zx12y" onclick="click_thing(this)"><p class="parent"><a name="c3zx12y" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/coderjoe" class="author gray id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 18:49:52 2012 UTC" datetime="2012-03-11T18:49:52.923540+00:00">6 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/coderjoe" class="author id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">3 points</span><span class="score unvoted">4 points</span><span class="score likes">5 points</span>&#32;<time title="Sun Mar 11 18:49:52 2012 UTC" datetime="2012-03-11T18:49:52.923540+00:00">6 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zx12ypk5"><input type="hidden" name="thing_id" value="t1_c3zx12y"/><div class="usertext-body"><div class="md"><p>Just an interesting note: if you want to specify a context for an element, you can use the jQuery context parameter with the original selector.</p>

<pre><code>jQuery(&#39;a[rel=&quot;external&quot;]&#39;, &#39;#wrapper&#39;); //Get the original selector within the context of #wrapper
</code></pre>

<p>As you probably already know, your second example using the &quot;new&quot; jQuery.on syntax does not apply to my above example.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zx12y" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zwpjw" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zxzuc odd comment " data-fullname="t1_c3zxzuc" onclick="click_thing(this)"><p class="parent"><a name="c3zxzuc" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/matchu" class="author gray id-t2_3ea4c" >matchu</a><span class="userattrs"></span>&#32;<span class="score dislikes">5 points</span><span class="score unvoted">6 points</span><span class="score likes">7 points</span>&#32;<time title="Sun Mar 11 20:32:06 2012 UTC" datetime="2012-03-11T20:32:06.811081+00:00">5 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/matchu" class="author id-t2_3ea4c" >matchu</a><span class="userattrs"></span>&#32;<span class="score dislikes">5 points</span><span class="score unvoted">6 points</span><span class="score likes">7 points</span>&#32;<time title="Sun Mar 11 20:32:06 2012 UTC" datetime="2012-03-11T20:32:06.811081+00:00">5 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zxzucjgf"><input type="hidden" name="thing_id" value="t1_c3zxzuc"/><div class="usertext-body"><div class="md"><p>Regardless of minor performance variations, I&#39;d pick #1 just because it&#39;s the simplest.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zxzuc" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zxzuc" class="sitetable listing"><div class="thing id-t1_c3zy4n8 even comment " data-fullname="t1_c3zy4n8" onclick="click_thing(this)"><p class="parent"><a name="c3zy4n8" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/LieutenantClone" class="author gray id-t2_3hk7l" >LieutenantClone</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 20:46:12 2012 UTC" datetime="2012-03-11T20:46:12.829230+00:00">4 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/LieutenantClone" class="author id-t2_3hk7l" >LieutenantClone</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 20:46:12 2012 UTC" datetime="2012-03-11T20:46:12.829230+00:00">4 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zy4n8pjz"><input type="hidden" name="thing_id" value="t1_c3zy4n8"/><div class="usertext-body"><div class="md"><p>I agree.  IMO, its nearly always the best idea to use the most readable syntax, not the &quot;fastest&quot; one.  When the next version of jQuery is released, the performance of these selectors could change, and all of a sudden the relative performance is reversed.  Or the performance could change depending on the client environment.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zy4n8" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zxzuc" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zzcr3 odd comment " data-fullname="t1_c3zzcr3" onclick="click_thing(this)"><p class="parent"><a name="c3zzcr3" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/mistralol" class="author gray id-t2_4ly91" >mistralol</a><span class="userattrs"></span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 22:51:43 2012 UTC" datetime="2012-03-11T22:51:43.960959+00:00">2 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/mistralol" class="author id-t2_4ly91" >mistralol</a><span class="userattrs"></span>&#32;<span class="score dislikes">2 points</span><span class="score unvoted">3 points</span><span class="score likes">4 points</span>&#32;<time title="Sun Mar 11 22:51:43 2012 UTC" datetime="2012-03-11T22:51:43.960959+00:00">2 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zzcr3d50"><input type="hidden" name="thing_id" value="t1_c3zzcr3"/><div class="usertext-body"><div class="md"><p>If you have something sever side generating a high number of elements push them as an array in javascript then you don&#39;t need the jquery selector ;)</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zzcr3" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c400rvr even comment " data-fullname="t1_c400rvr" onclick="click_thing(this)"><p class="parent"><a name="c400rvr" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/SharkUW" class="author gray id-t2_35rrm" >SharkUW</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Mon Mar 12 01:14:48 2012 UTC" datetime="2012-03-12T01:14:48.660584+00:00">20 minutes</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/SharkUW" class="author id-t2_35rrm" >SharkUW</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Mon Mar 12 01:14:48 2012 UTC" datetime="2012-03-12T01:14:48.660584+00:00">20 minutes</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c400rvry34"><input type="hidden" name="thing_id" value="t1_c400rvr"/><div class="usertext-body"><div class="md"><p>Although your question could be important. One of the largest beginner style JS performance hits comes from grabbing the same set of elements from within a loop as well as repeated hammering on a particular array item.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c400rvr" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zvofg odd comment " data-fullname="t1_c3zvofg" onclick="click_thing(this)"><p class="parent"><a name="c3zvofg" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/x-skeww" class="author gray id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">-2 points</span><span class="score unvoted">-1 points</span><span class="score likes">0 points</span>&#32;<time title="Sun Mar 11 16:07:08 2012 UTC" datetime="2012-03-11T16:07:08.317678+00:00">9 hours</time>&#32;ago<em>*</em>&nbsp; &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(4 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/x-skeww" class="author id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">-2 points</span><span class="score unvoted">-1 points</span><span class="score likes">0 points</span>&#32;<time title="Sun Mar 11 16:07:08 2012 UTC" datetime="2012-03-11T16:07:08.317678+00:00">9 hours</time>&#32;ago<em>*</em>&nbsp;</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zvofg3p0"><input type="hidden" name="thing_id" value="t1_c3zvofg"/><div class="usertext-body"><div class="md"><p>#1 may be optimized to #3 by the selector engine. #2 is slow because it can&#39;t start with <code>getElementsByTagName</code>.</p>

<p>Anyhow, look into event delegation. You don&#39;t have to attach an event handler to all of those elements.</p>

<p><strong>Edit:</strong> sleesechice&#39;s benchmark confirms this, by the way. Use a realistic DOM and you&#39;ll see that #3 is the fastest and #2 is the slowest.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zvofg" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zvofg" class="sitetable listing"><div class="thing id-t1_c3zweqn even comment " data-fullname="t1_c3zweqn" onclick="click_thing(this)"><p class="parent"><a name="c3zweqn" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/coderjoe" class="author gray id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Sun Mar 11 17:37:58 2012 UTC" datetime="2012-03-11T17:37:58.552544+00:00">7 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(2 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/coderjoe" class="author id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Sun Mar 11 17:37:58 2012 UTC" datetime="2012-03-11T17:37:58.552544+00:00">7 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zweqn4ze"><input type="hidden" name="thing_id" value="t1_c3zweqn"/><div class="usertext-body"><div class="md"><p>Your statements aren&#39;t entirely correct.</p>

<blockquote>
<p>#1 may be optimized to #3 by the selector engine</p>
</blockquote>

<p>As I read it, for the examples above on modern browsers, Sizzle (the selector engine) will utilize document.querySelectorAll() to do a native lookup by CSS selector in the browser which is notably faster than #3.</p>

<p>Given realistic DOM: Copy paste Reddit, and modify the selectors to search for rel=&quot;nofollow&quot;</p>

<p>#1 is the fastest, #3 is the slowest. (Tested on Chrome 18.0.1025)</p>

<blockquote>
<p>#2 is slow because it can&#39;t start with getElementsByTagName</p>
</blockquote>

<p>On old browsers that is true. However, on newer browsers Sizzle using document.querySelectorAll() results in #2 being faster than #3.</p>

<p>For more information check out the code: <a href="https://github.com/jquery/sizzle/blob/1.5.1/sizzle.js" rel="nofollow">github.com sizzle.js tag 1.5.1</a></p>

<p>Search for document.querySelectorAll()</p>

<p>As seen on <a href="http://www.quirksmode.org/dom/w3c_core.htm" rel="nofollow">QuirksMode W3C Core compat</a> Most browser versions in use today use document.querySelectorAll.</p>

<p>IE &lt; 8, FF &lt; 3.5 do not use it.
IE &gt;=8, FF &gt;= 3.5, Opera, Chrome, Safari do.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zweqn" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zvofg" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zweqn" class="sitetable listing"><div class="thing id-t1_c3zwj1h odd comment " data-fullname="t1_c3zwj1h" onclick="click_thing(this)"><p class="parent"><a name="c3zwj1h" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/x-skeww" class="author gray id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 17:51:39 2012 UTC" datetime="2012-03-11T17:51:39.799244+00:00">7 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/x-skeww" class="author id-t2_4zxh3" >x-skeww</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 17:51:39 2012 UTC" datetime="2012-03-11T17:51:39.799244+00:00">7 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zwj1hqi8"><input type="hidden" name="thing_id" value="t1_c3zwj1h"/><div class="usertext-body"><div class="md"><blockquote>
<p>Sizzle (the selector engine) will utilize document.querySelectorAll()</p>
</blockquote>

<p>Sizzle doesn&#39;t always use QSA even if it&#39;s available.</p>

<blockquote>
<p>Tested on Chrome</p>
</blockquote>

<p>Different browsers, different DOMs... very different results.</p>

<p>Well, the main point was that you should not iterate over all these elements if you can avoid it. No matter which selector you pick, it will be slower than using event delegation.</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zwj1h" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zweqn" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zwj1h" class="sitetable listing"><div class="thing id-t1_c3zwvja even comment " data-fullname="t1_c3zwvja" onclick="click_thing(this)"><p class="parent"><a name="c3zwvja" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/coderjoe" class="author gray id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 18:32:42 2012 UTC" datetime="2012-03-11T18:32:42.584649+00:00">7 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/coderjoe" class="author id-t2_2bcbz" >coderjoe</a><span class="userattrs"></span>&#32;<span class="score dislikes">1 point</span><span class="score unvoted">2 points</span><span class="score likes">3 points</span>&#32;<time title="Sun Mar 11 18:32:42 2012 UTC" datetime="2012-03-11T18:32:42.584649+00:00">7 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zwvjawwy"><input type="hidden" name="thing_id" value="t1_c3zwvja"/><div class="usertext-body"><div class="md"><blockquote>
<p>Sizzle doesn&#39;t always use QSA even if it&#39;s available.</p>
</blockquote>

<p>True, but irrelevant in this case, because when available given the OP&#39;s selectors, it will use QSA.</p>

<blockquote>
<p>Different browsers, different DOMs... very different results.</p>
</blockquote>

<p>I&#39;ve re-tested in IE8 and Firefox 9 with both the OP&#39;s original DOM, and my Reddit copy. I&#39;ve received the same results. It was you that suggested that a &quot;realistic&quot; DOM be checked. Hence my Reddit test. I was testing your assertion, which didn&#39;t hold up.</p>

<p>#1 is fastest, #3 is slowest. (Edit: For the above tested cases)</p>

<blockquote>
<p>Well, the main point was that you should not iterate over all these elements if you can avoid it. No matter which selector you pick, it will be slower than using event delegation.</p>
</blockquote>

<p>I absolutely agree. Well said. :)</p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zwvja" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zwj1h" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div><div class="thing id-t1_c3zwec3 odd comment " data-fullname="t1_c3zwec3" onclick="click_thing(this)"><p class="parent"><a name="c3zwec3" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/wtfmanquestionmark" class="author gray id-t2_3fasv" >wtfmanquestionmark</a><span class="userattrs"></span>&#32;<span class="score dislikes">-2 points</span><span class="score unvoted">-1 points</span><span class="score likes">0 points</span>&#32;<time title="Sun Mar 11 17:36:42 2012 UTC" datetime="2012-03-11T17:36:42.173164+00:00">7 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(1 child)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/wtfmanquestionmark" class="author id-t2_3fasv" >wtfmanquestionmark</a><span class="userattrs"></span>&#32;<span class="score dislikes">-2 points</span><span class="score unvoted">-1 points</span><span class="score likes">0 points</span>&#32;<time title="Sun Mar 11 17:36:42 2012 UTC" datetime="2012-03-11T17:36:42.173164+00:00">7 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zwec3pi9"><input type="hidden" name="thing_id" value="t1_c3zwec3"/><div class="usertext-body"><div class="md"><p>Delegate is perfect for this. </p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zwec3" class="bylink" rel="nofollow" >permalink</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ><div id="siteTable_t1_c3zwec3" class="sitetable listing"><div class="thing id-t1_c3zz8u9 even comment " data-fullname="t1_c3zz8u9" onclick="click_thing(this)"><p class="parent"><a name="c3zz8u9" ></a></p><div class="midcol unvoted" ><div class="arrow up login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div><div class="arrow down login-required" onclick="$(this).vote('<$>votehash</$>', null, event)" ></div></div><div class="entry unvoted"><div class="collapsed" style='display:none'><a href="#" class="expand" onclick="return showcomment(this)">[+]</a><a href="http://www.reddit.com/user/the_argus" class="author gray id-t2_3b7wv" >the_argus</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Sun Mar 11 22:40:15 2012 UTC" datetime="2012-03-11T22:40:15.325780+00:00">2 hours</time>&#32;ago &nbsp;<a href="#" class="expand" onclick="return showcomment(this)">(0 children)</a></div><div class="noncollapsed" ><p class="tagline"><a href="#" class="expand" onclick="return hidecomment(this)">[&ndash;]</a><a href="http://www.reddit.com/user/the_argus" class="author id-t2_3b7wv" >the_argus</a><span class="userattrs"></span>&#32;<span class="score dislikes">0 points</span><span class="score unvoted">1 point</span><span class="score likes">2 points</span>&#32;<time title="Sun Mar 11 22:40:15 2012 UTC" datetime="2012-03-11T22:40:15.325780+00:00">2 hours</time>&#32;ago</p><form action="#" class="usertext" onsubmit="return post_form(this, 'editusertext')" id="form-t1_c3zz8u9zkz"><input type="hidden" name="thing_id" value="t1_c3zz8u9"/><div class="usertext-body"><div class="md"><p>As of jQuery 1.7, .delegate() has been superseded by the .on() method.</p>

<p><a href="http://api.jquery.com/delegate/" rel="nofollow">http://api.jquery.com/delegate/</a></p>
</div>
</div></form><ul class="flat-list buttons"><li class="first"><a href="http://www.reddit.com/r/web_design/comments/qrky3/wich_jquery_selector_is_the_most_efficient_when/c3zz8u9" class="bylink" rel="nofollow" >permalink</a></li><li><a href="#c3zwec3" class="bylink" rel="nofollow" >parent</a></li><li><form class="toggle report-button " action="#" method="get"><input type="hidden" name="executed" value="reported"/><span class="option main active"><a href="#" class="togglebutton" onclick="return toggle(this)">report</a></span><span class="option error">are you sure? &#32;<a href="javascript:void(0)" class="yes" onclick='change_state(this, "report", hide_thing)'>yes</a>&#32;/&#32;<a href="javascript:void(0)" class="no" onclick="return toggle(this)">no</a></span></form></li><li><a class="" href="javascript:void(0)" onclick="return reply(this)">reply</a></li></ul></div></div><div class="child" ></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div></div><div class="clearleft"><!--IE6sux--></div></div><div class="clearleft"><!--IE6sux--></div></div><script type="text/javascript">var likes = []; var dislikes = []; var friends = []; $.map(likes, function(l) { $(".id-" + l).find(".arrow.up:first").vote("", null, null, true); }); $.map(dislikes, function(l) { $(".id-" + l).find(".arrow.down:first").vote("", null, null, true); }); $.map(friends, show_friend);</script></div></div><div class="footer-parent"><div by-zero class="footer rounded"><div class="col"><ul class="flat-vert hover" ><li class="flat-vert title">about</li><li ><a href="http://www.reddit.com/blog/" >blog</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/ad_inq/" >advertise</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/code/" >source code</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/feedback/" >contact us</a></li></ul></div><div class="col"><ul class="flat-vert hover" ><li class="flat-vert title">help</li><li ><a href="http://www.reddit.com/help/" >help</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/help/faq" >FAQ</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/help/reddiquette" >reddiquette</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/reddits/" >subreddits</a></li></ul></div><div class="col"><ul class="flat-vert hover" ><li class="flat-vert title">tools</li><li ><a href="http://i.reddit.com" >mobile</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/socialite/" >firefox extension</a></li><li ><span class="separator"></span><a href="https://chrome.google.com/webstore/detail/algjnflpgoopkdijmkalfcifomdhmcbe" >chrome extension</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/r/web_design/buttons/" >buttons</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/r/web_design/widget/" >widget</a></li></ul></div><div class="col"><ul class="flat-vert hover" ><li class="flat-vert title">&lt;3</li><li ><a href="http://www.reddit.com/help/gold/" class="buygold" >reddit gold</a></li><li ><span class="separator"></span><a href="http://www.reddit.com/store/" >store</a></li><li ><span class="separator"></span><a href="http://redditgifts.com" >redditgifts</a></li><li ><span class="separator"></span><a href="http://reddit.tv" >reddit.tv</a></li><li ><span class="separator"></span><a href="http://radioreddit.com" >radio reddit</a></li></ul></div></div><p class="bottommenu">Use of this site constitutes acceptance of our&#32;<a href="http://reddit.com/help/useragreement" >User Agreement</a>&#32;and&#32;<a href="http://reddit.com/help/privacypolicy" >Privacy Policy</a>. &copy; 2012 reddit inc. All rights reserved.</p><p class="bottommenu">REDDIT and the ALIEN Logo are registered trademarks of reddit inc.</p><p class="bottommenu serverinfo"><span class="icon">&pi;</span>&nbsp;<span class="content">Rendered by PID 24688 on app-137 running 63f38ef.</span></p></div>

Preparation code output

google a page
this post was submitted on
42 points (82% like it)
53 up votes 11 down votes

web_design

subscribe42,896 readers
Show my flair on this reddit. It looks like:

Common Dev Tools

Topics related to web design: HTML, CSS, JS, layout, UI, graphics, etc.

Related reddits:
/r/design_critiques
/r/webdev
/r/wordpress
/r/design
/r/javascript
/r/php
/r/webhosting

Want to talk about web design?
irc://irc.freenode.net:6777/#reddit-webdesign

Looking for a job, or want to hire a redditor?
/r/forhire

ps: thanks to pajamasofwrath for the excellent logo!

a community for
all 22 comments

[–]sleesechice 60 points61 points ago

so i made this for you.

have fun

[–]Brandon0 13 points14 points ago

Wow, I'm shocked #2 was faster than #3.

[–]x-skeww 4 points5 points ago

#2 was faster than #3

With a completely unrealistic DOM, yes.

If you use one which is similar to reddit's, #3 is the fastest, #1 is slower, and #2 is way slower.

[–]celtric 3 points4 points ago

Same here. Why is that? I thought you had to traverse every single element looking for that specific attribute (at least in IE).

[–]9jack9 4 points5 points ago

Because jQuery is smart enough to use querySelectorAll for this example. If you tried it in IE6/7 you would get very different results.

[–]hupcapstudios 8 points9 points ago

This is awesome. HOWEVER, this might not be a good representation of a real world model considering we're likely to have several more 'a' nodes in the DOM.

[–]sleesechice 2 points3 points ago

I agree it might not be... but then in the real world we would all filter our selectors with an id first eh? so we wouldn't traverse the entire dom.

If you feel the need to, you could re-run the tests with your filtered portion of the document. It would be a more interesting test case for sure.

[–]andytuba 3 points4 points ago

Moral of the story: don't pre-optimize; wait for data!

[–]OnderString[S] 2 points3 points ago

Wow, that was amazing! thanks a lot.

[–]matchu 1 point2 points ago

Neat! Point of curiosity: why does this page use a Java applet? The tests seemed to run fine without it :/

edit: never mind, found it

[–]eligundry 13 points14 points ago

At the very least, I'd root at selector with an element/ID, like so:

$('#wrapper').find('a[rel=external]');

This is because the first selector uses the built in JS getElementByID and throws the rest at the Sizzle engine, which is a lot slower. Anyway to make the list of elements parsed is a good thing.

I can only assume that you will be attaching some sort of event listener to this link, so you should be sure to check out .on, which will significantly reduce the amount of overhead for a lot of event listeners. The syntax looks like this:

$('#wrapper').on("click", "a[rel=external", function() { // code here});

Let's say you had 100 external links and you wanted to attach an event to them. If you went with your selectors with the click function, you'd have 100 event listeners. With the code above, you have but one.

Also, if you're going to be using it more than once, be sure to cache it in a variable.

[–]coderjoe 3 points4 points ago

Just an interesting note: if you want to specify a context for an element, you can use the jQuery context parameter with the original selector.

jQuery('a[rel="external"]', '#wrapper'); //Get the original selector within the context of #wrapper

As you probably already know, your second example using the "new" jQuery.on syntax does not apply to my above example.

[–]matchu 5 points6 points ago

Regardless of minor performance variations, I'd pick #1 just because it's the simplest.

[–]LieutenantClone 1 point2 points ago

I agree. IMO, its nearly always the best idea to use the most readable syntax, not the "fastest" one. When the next version of jQuery is released, the performance of these selectors could change, and all of a sudden the relative performance is reversed. Or the performance could change depending on the client environment.

[–]mistralol 2 points3 points ago

If you have something sever side generating a high number of elements push them as an array in javascript then you don't need the jquery selector ;)

[–]SharkUW 0 points1 point ago

Although your question could be important. One of the largest beginner style JS performance hits comes from grabbing the same set of elements from within a loop as well as repeated hammering on a particular array item.

[–]x-skeww -2 points-1 points ago* 

#1 may be optimized to #3 by the selector engine. #2 is slow because it can't start with getElementsByTagName.

Anyhow, look into event delegation. You don't have to attach an event handler to all of those elements.

Edit: sleesechice's benchmark confirms this, by the way. Use a realistic DOM and you'll see that #3 is the fastest and #2 is the slowest.

[–]coderjoe 0 points1 point ago

Your statements aren't entirely correct.

#1 may be optimized to #3 by the selector engine

As I read it, for the examples above on modern browsers, Sizzle (the selector engine) will utilize document.querySelectorAll() to do a native lookup by CSS selector in the browser which is notably faster than #3.

Given realistic DOM: Copy paste Reddit, and modify the selectors to search for rel="nofollow"

#1 is the fastest, #3 is the slowest. (Tested on Chrome 18.0.1025)

#2 is slow because it can't start with getElementsByTagName

On old browsers that is true. However, on newer browsers Sizzle using document.querySelectorAll() results in #2 being faster than #3.

For more information check out the code: github.com sizzle.js tag 1.5.1

Search for document.querySelectorAll()

As seen on QuirksMode W3C Core compat Most browser versions in use today use document.querySelectorAll.

IE < 8, FF < 3.5 do not use it. IE >=8, FF >= 3.5, Opera, Chrome, Safari do.

[–]x-skeww 1 point2 points ago

Sizzle (the selector engine) will utilize document.querySelectorAll()

Sizzle doesn't always use QSA even if it's available.

Tested on Chrome

Different browsers, different DOMs... very different results.

Well, the main point was that you should not iterate over all these elements if you can avoid it. No matter which selector you pick, it will be slower than using event delegation.

[–]coderjoe 1 point2 points ago

Sizzle doesn't always use QSA even if it's available.

True, but irrelevant in this case, because when available given the OP's selectors, it will use QSA.

Different browsers, different DOMs... very different results.

I've re-tested in IE8 and Firefox 9 with both the OP's original DOM, and my Reddit copy. I've received the same results. It was you that suggested that a "realistic" DOM be checked. Hence my Reddit test. I was testing your assertion, which didn't hold up.

#1 is fastest, #3 is slowest. (Edit: For the above tested cases)

Well, the main point was that you should not iterate over all these elements if you can avoid it. No matter which selector you pick, it will be slower than using event delegation.

I absolutely agree. Well said. :)

[–]wtfmanquestionmark -2 points-1 points ago

Delegate is perfect for this.

[–]the_argus 0 points1 point ago

As of jQuery 1.7, .delegate() has been superseded by the .on() method.

http://api.jquery.com/delegate/

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
selector one
$('a[rel="external"]');
pending…
selector two
 $('[rel="external"]').filter('a');
pending…
selector three
 $('a').filter('[rel=external]');
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