Which jQuery/Sizzle selector is faster?

Benchmark created by Rich on


Description

http://stackoverflow.com/questions/7262116/jquery-selectors-efficiency

Half of people say one, half the other. The only way to find things out is to measure them, so here we go.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <noscript><div id="noscript-padding"></div></noscript>
    <div id="notify-container"></div>
    <div id="overlay-header"></div>
    <div id="custom-header"></div>

    <div class="container">
        <div id="header">
            <div id="portalLink">
                <a class="genu" href="http://stackexchange.com" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
            </div>
            <div id="topbar">
                <div id="hlinks">
                    <span id="hlinks-user">
                  <span class="profile-triangle">&#9662;</span><a href="/users/16511/rich-bradshaw" class="profile-link">Rich Bradshaw</a>&nbsp;<a href="/users/16511/rich-bradshaw?tab=reputation"><span class="reputation-score" title="your reputation; view reputation changes">12,125</span></a><span title="5 gold badges"><span class="badge1"></span><span class="badgecount">5</span></span><span title="26 silver badges"><span class="badge2"></span><span class="badgecount">26</span></span><span title="78 bronze badges"><span class="badge3"></span><span class="badgecount">78</span></span>
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-nav">
                  <a href="/review/">tools</a>
 <span class="lsep">|</span>
<a href="/review/suggested-edits" class="mod-flag-indicator hotbg" title="suggested edits pending approval">12</a> 
 <span class="lsep">|</span>

                  </span>
                  <span id="hlinks-custom">
                  <a href="http://chat.stackoverflow.com">chat</a>
 <span class="lsep">|</span>
<a href="http://meta.stackoverflow.com">meta</a>
 <span class="lsep">|</span>
<a href="/faq">faq</a>
                  </span>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get" autocomplete="off">
                    <div>
                        <input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="">
                    </div>
                    </form>
                </div>
            </div>
            <br class="cbt">
            <div id="hlogo">
                <a href="/" >Stack Overflow</a>
            </div>
            <div id="hmenus">
                <div class="nav mainnavs">
                    <ul>
                        <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li>
                        <li><a id="nav-tags" href="/tags">Tags</a></li>
                        <li><a id="nav-users" href="/users">Users</a></li>
                        <li><a id="nav-badges" href="/badges">Badges</a></li>
                        <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                    </ul>
                </div>
                <div class="nav askquestion">
                    <ul>
                        <li>
                            <a id="nav-askquestion"  href="/questions/ask">Ask Question</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        


        <div id="content">
            



<div id="question-header">
    <h1><a href="/questions/7262116/jquery-selectors-efficiency" class="question-hyperlink">jQuery Selectors, efficiency</a></h1>
</div>
<div id="mainbar">


<div id="question">

    <table>
    <tr>
    <td class="votecell">
        
<div class="vote">
    <input type="hidden" value="7262116">
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>
    <span class="vote-count-post">2</span>
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a>

    <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a>
    <div class="favoritecount"><b>2</b></div>    

</div>

    </td>

<td class="postcell">
<div>          
    <div class="post-text">
        <p>I have been reading more lately about the efficiency of the different selector engines. I know that jQuery uses the Sizzle engine <a href="http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/" rel="nofollow">this blog post</a> about some jQuery stuff mentioned that the Sizzle engine will break apart your selector into an array then parse left to right.</p>

<blockquote>
  <p>It then, from right to left, begins deciphering each item with regular expressions. What this also means is that the right-most part of your selector should be as specific as possible — for instance, an id or tag name. </p>
</blockquote>

<p>My question is whether it is more efficient to run a selector with <strong>just</strong> the ID specified or the tag name as well:</p>

<pre><code>var div = $('#someId');
//OR
var div = $('div#someId');
</code></pre>

<p>Since I write my CSS in the <code>div#someId</code> form I tend to do my selectors the same way, am I causing Sizzle to perform extra work (assuming <em>QuerySelectorAll</em> is unavailable)?</p>

    </div>            
    <div class="post-taglist">
        <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="/questions/tagged/performance" class="post-tag" title="show questions tagged 'performance'" rel="tag">performance</a> <a href="/questions/tagged/sizzle" class="post-tag" title="show questions tagged 'sizzle'" rel="tag">sizzle</a> 
    </div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/q/7262116/16511" title="short permalink to this question" id="link-post-7262116">link</a><span class="lsep">|</span><a href="/posts/7262116/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="close-question-7262116" href="#" title="vote to close or reopen question; when closed, no new answers can be added">close</a><span class="lsep">|</span><a id="flag-post-7262116" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
<script>
    StackExchange.using("inlineTagEditing", function () {
        StackExchange.inlineTagEditing.init();
    });
</script>    </td>
                        

    <td class="post-signature owner">
    <div class="user-info"><div class="user-action-time">asked <span title="2011-08-31 19:08:35Z" class="relativetime">5 mins ago</span></div><div class="user-gravatar32"><a href="/users/725851/chad"><div class=""><img src="http://www.gravatar.com/avatar/6eb2d58a613015ccde3f2002ace4e08e?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/725851/chad">Chad</a><br><span class="reputation-score" title="reputation score">1,734</span><span title="1 silver badge"><span class="badge2"></span><span class="badgecount">1</span></span><span title="8 bronze badges"><span class="badge3"></span><span class="badgecount">8</span></span></div></div>
    </td>
    </tr>
    </table>
</div>
</td>
    </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7262116" class="comments">
        <table>
        <tbody>
                    
    <tr id="comment-8738980" class="comment">
        <td class="comment-actions"><table><tbody><tr>
<td class="comment-score">
<span>&nbsp;</span>
</td>
<td>
<a class="comment-up comment-up-off" title="this is a great comment">upvote</a>
</td></tr>
<tr><td>&nbsp;</td><td><a class="comment-flag flag-off" title="flag this comment as unconstructive, offensive, or spam">flag</a></td></tr></tbody></table></td>
        <td class="comment-text"><div><span class="comment-copy">Great question! I was thinking about asking a similar question myself.</span> &ndash;&nbsp;<a href="/users/238260/rice-flour-cookies" title="3666 reputation" class="comment-user">Rice Flour Cookies</a> <span class="comment-date"><span title="2011-08-31 19:10:31Z">3 mins ago</span></span></div></td>
    </tr>
            
    <tr id="comment-8738982" class="comment">
        <td class="comment-actions"><table><tbody><tr>
<td class="comment-score">
<span>&nbsp;</span>
</td>
<td>
<a class="comment-up comment-up-off" title="this is a great comment">upvote</a>
</td></tr>
<tr><td>&nbsp;</td><td><a class="comment-flag flag-off" title="flag this comment as unconstructive, offensive, or spam">flag</a></td></tr></tbody></table></td>
        <td class="comment-text"><div><span class="comment-copy">For performance questions the best answer is usually to try it yourself. jsperf.com can help you benchmarking javascript snippets.</span> &ndash;&nbsp;<a href="/users/272031/eduardocereto" title="1046 reputation" class="comment-user">eduardocereto</a> <span class="comment-date"><span title="2011-08-31 19:10:42Z">3 mins ago</span></span></div></td>
    </tr>

        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7262116"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7262116" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>    
</div>



<div id="answers">

    <a name="tab-top"></a>
    <div id="answers-header">
        <div class="subheader answers-subheader">
            <h2>4 Answers</h2>
            <div id="tabs">
                <a href="/questions/7262116/jquery-selectors-efficiency?answertab=active#tab-top" title="Answers with the latest activity first">active</a>
<a href="/questions/7262116/jquery-selectors-efficiency?answertab=oldest#tab-top" title="Answers in the order they were provided">oldest</a>
<a class="youarehere" href="/questions/7262116/jquery-selectors-efficiency?answertab=votes#tab-top" title="Answers with the highest score first">votes</a>

            </div>
        </div>
    </div>


  
    <a name="7262155"></a>
    <div id="answer-7262155" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7262155">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">1</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>It appears that using the tag names, ie:</p>

<pre><code>var div = $('div#someId');
</code></pre>

<p>should perform faster, according to the following Study:</p>

<p><a href="http://www.componenthouse.com/article-19" rel="nofollow"><strong>jQuery Selector Performance Testing</strong></a></p>

<p><em>(Performance can vary based on browser and what it supports)</em></p>
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7262116/jquery-selectors-efficiency/7262155#7262155" title="permalink to this answer" id="link-post-7262155">link</a><span class="lsep">|</span><a href="/posts/7262155/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7262155" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info"><div class="user-action-time">answered <span title="2011-08-31 19:11:25Z" class="relativetime">2 mins ago</span></div><div class="user-gravatar32"><a href="/users/557445/rionmonster"><div class=""><img src="http://www.gravatar.com/avatar/93a0d4a722b2fae0bf159c9283fe1aff?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/557445/rionmonster">Rionmonster</a><br><span class="reputation-score" title="reputation score">7,323</span><span title="11 silver badges"><span class="badge2"></span><span class="badgecount">11</span></span><span title="27 bronze badges"><span class="badge3"></span><span class="badgecount">27</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7262155" class="comments">
        <table>
        <tbody>
                    
    <tr id="comment-8739025" class="comment">
        <td class="comment-actions"><table><tbody><tr>
<td class="comment-score">
<span>&nbsp;</span>
</td>
<td>
<a class="comment-up comment-up-off" title="this is a great comment">upvote</a>
</td></tr>
<tr><td>&nbsp;</td><td><a class="comment-flag flag-off" title="flag this comment as unconstructive, offensive, or spam">flag</a></td></tr></tbody></table></td>
        <td class="comment-text"><div><span class="comment-copy">Article is from 2007, little outdated.</span> &ndash;&nbsp;<a href="/users/14104/epascarello" title="8186 reputation" class="comment-user">epascarello</a> <span class="comment-date"><span title="2011-08-31 19:13:21Z">34 secs ago</span></span></div></td>
    </tr>

        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7262155"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7262155" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7262147"></a>
    <div id="answer-7262147" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7262147">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">1</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>jQuery and Sizzle optimize the <code>#id</code> selector to <code>document.getElementById(id)</code>. I think they aren't able to optimize it like this with the <code>tag#id</code>.</p>

<p>The first is faster.</p>
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7262116/jquery-selectors-efficiency/7262147#7262147" title="permalink to this answer" id="link-post-7262147">link</a><span class="lsep">|</span><a href="/posts/7262147/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7262147" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info"><div class="user-action-time">answered <span title="2011-08-31 19:11:10Z" class="relativetime">2 mins ago</span></div><div class="user-gravatar32"><a href="/users/576875/arnaud576875"><div class=""><img src="http://www.gravatar.com/avatar/9bc38525ee93e607328ff0374481162b?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/576875/arnaud576875">arnaud576875</a><br><span class="reputation-score" title="reputation score">9,117</span><span title="5 silver badges"><span class="badge2"></span><span class="badgecount">5</span></span><span title="25 bronze badges"><span class="badge3"></span><span class="badgecount">25</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7262147" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7262147"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7262147" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7262156"></a>
    <div id="answer-7262156" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7262156">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">0</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>Tag names should definately be used with class selectors</p>

<pre><code>var div = $('div.myclass') //faster than the statement below
</code></pre>

<p>versus</p>

<pre><code>var div = $('.myclass') //slower
</code></pre>
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7262116/jquery-selectors-efficiency/7262156#7262156" title="permalink to this answer" id="link-post-7262156">link</a><span class="lsep">|</span><a href="/posts/7262156/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7262156" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info"><div class="user-action-time">answered <span title="2011-08-31 19:11:27Z" class="relativetime">2 mins ago</span></div><div class="user-gravatar32"><a href="/users/254528/john-hartsock"><div class=""><img src="http://www.gravatar.com/avatar/74e7ac83b5de18dc1ab6b2cd6bb67cb5?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/254528/john-hartsock">John Hartsock</a><br><span class="reputation-score" title="reputation score 14902">14.9k</span><span title="1 gold badge"><span class="badge1"></span><span class="badgecount">1</span></span><span title="11 silver badges"><span class="badge2"></span><span class="badgecount">11</span></span><span title="40 bronze badges"><span class="badge3"></span><span class="badgecount">40</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7262156" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7262156"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7262156" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>

  
    <a name="7262157"></a>
    <div id="answer-7262157" class="answer" >
        <table>
        <tr>
        <td class="votecell">
            
<div class="vote">
    <input type="hidden" value="7262157">
    <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
    <span class="vote-count-post">0</span>
    <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>

</div>

        </td>


<td class="answercell">
    <div class="post-text"><p>If you are using jQuery, you can assume a browser with <code>getElementById</code>.  <code>$('#someId')</code> can be converted to <code>document.getElementById('someId')</code>.  <code>$('div#someId')</code> won't be, so it will be faster to lose the tag name.</p>
</div>
    <table class="fw">
    <tr>
    <td class="vt">
        <div class="post-menu"><a href="/questions/7262116/jquery-selectors-efficiency/7262157#7262157" title="permalink to this answer" id="link-post-7262157">link</a><span class="lsep">|</span><a href="/posts/7262157/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a id="flag-post-7262157" href="#" title="flag this post for serious problems or moderator attention">flag</a></div>
    </td>
            

    <td align="right" class="post-signature">   
       

    <div class="user-info"><div class="user-action-time">answered <span title="2011-08-31 19:11:32Z" class="relativetime">2 mins ago</span></div><div class="user-gravatar32"><a href="/users/417562/lonesomeday"><div class=""><img src="http://www.gravatar.com/avatar/de4385849864206eebaefa5c801d21f1?s=32&amp;d=identicon&amp;r=PG" alt=""></div></a></div><div class="user-details"><a href="/users/417562/lonesomeday">lonesomeday</a><br><span class="reputation-score" title="reputation score 32044">32k</span><span title="4 gold badges"><span class="badge1"></span><span class="badgecount">4</span></span><span title="21 silver badges"><span class="badge2"></span><span class="badgecount">21</span></span><span title="48 bronze badges"><span class="badge3"></span><span class="badgecount">48</span></span></div></div>
    </td>
    </tr>
    </table>
</td>        </tr>


<tr>
<td class="votecell"></td>
<td>
    <div id="comments-7262157" class="comments dno">
        <table>
        <tbody>
        
            <tr><td></td><td></td></tr>
        
        </tbody>
    
        <tfoot>
            <tr>
                <td></td>
                <td class="comment-form"><form id="add-comment-7262157"></form></td>
            </tr>
        </tfoot>
    
        </table>
    </div>
    <a id="comments-link-7262157" class="comments-link" title="ask author for clarification about this post">add comment</a>
    
</td>
</tr>    </table>
</div>
    <a name='new-answer'></a>
    <form id="post-form" action="/questions/7262116/answer/submit" method="post"  class="post-form">
        <h2 class="space">Your Answer</h2>
       

<script>
    StackExchange.ready(function() {
        initTagRenderer("".split(" "), "".split(" "));

              
            prepareEditor({
                
                heartbeatType: 'answer',
                bindNavPrevention: true,
                postfix: "",
                onDemand: false                
            });
            
    });  
</script>


<div id="post-editor" class="post-editor">  

    
    <div class="wmd-container">
        <div id="wmd-button-bar" class="wmd-button-bar"></div>
        <textarea id="wmd-input" class="wmd-input" name="post-text" cols="92" rows="15" tabindex="101"></textarea>
    </div>

    <div class="fl" style="margin-top: 8px; height:24px;">&nbsp;</div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>

    <div class="community-option">
        <input id="communitymode" name="communitymode" type="checkbox" >
        <label for="communitymode" title="Marking an answer community wiki encourages others to edit it by lowering the reputation barrier required to edit. However, you will not gain any upvote reputation from it. This cannot be undone.">community wiki</label>
    </div>


    <div id="wmd-preview" class="wmd-preview"></div>
    <div></div>
    <div class="edit-block">
        <input id="fkey" name="fkey" type="hidden" value="90953025c05b3d336ea808b1554bd6f0">
        <input id="author" name="author" type="text">
    </div>
</div>           
        <div class="form-submit cbt"><input id="submit-button" type="submit" value="Post Your Answer" tabindex="110"></div>
    </form>
<script>
    StackExchange.using("inlineEditing", function () {
        StackExchange.inlineEditing.init();
    });
</script>

    <h2 class="bottom-notice">
        Not the answer you're looking for? 
        Browse other questions tagged <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="/questions/tagged/performance" class="post-tag" title="show questions tagged 'performance'" rel="tag">performance</a> <a href="/questions/tagged/sizzle" class="post-tag" title="show questions tagged 'sizzle'" rel="tag">sizzle</a> 
                or <a href="/questions/ask">ask your own question</a>.
    </h2>
</div>
</div>
<div id="sidebar">
    <div class="module">
        <p class="label-key">tagged</p>
        <div class="tagged"><a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged 'javascript'" rel="tag">javascript</a>&nbsp;<span class="item-multiplier">&times;&nbsp;126308</span><br>
<a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged 'jquery'" rel="tag">jquery</a>&nbsp;<span class="item-multiplier">&times;&nbsp;109136</span><br>
<a href="/questions/tagged/performance" class="post-tag" title="show questions tagged 'performance'" rel="tag">performance</a>&nbsp;<span class="item-multiplier">&times;&nbsp;14024</span><br>
<a href="/questions/tagged/sizzle" class="post-tag" title="show questions tagged 'sizzle'" rel="tag">sizzle</a>&nbsp;<span class="item-multiplier">&times;&nbsp;44</span><br>
</div>
        <table id="qinfo">
            <tr>
                <td><p class="label-key">asked</p></td>
                <td style="padding-left:10px"><p class="label-key" title="2011-08-31 19:08:35Z"><b>today</b></p></td>
            </tr>
            <tr>
                <td><p class="label-key">viewed</p></td>

                <td style="padding-left:10px"><p class="label-key"><b>27 times</b></p></td>
            </tr>
            <tr>
                <td><p class="label-key">active</p></td>
                <td style="padding-left:10px"><p class="label-key"><b><a href="?lastactivity" class="lastactivity-link" title="2011-08-31 19:11:32Z">today</a></b></p></td>
            </tr>
        </table>
    </div>
    
        <script>
            var scriptSrc = "http://engine2.adzerk.net/z/8277/adzerk2_2_17_45?keywords=javascript,jquery,performance,sizzle,x-user-registered,x-user-highrep";
            if (document.referrer) {
                if (/\?/.test(scriptSrc))
                    scriptSrc += "&";
                else
                    scriptSrc += "?";
                scriptSrc += "xReferrer=" + document.referrer;
            }
            var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = scriptSrc; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);
        </script>
    
    <div class="everyonelovesstackoverflow" id="adzerk2">
    </div>

    
    <div>
        <script>
            (function(){var q="http://careers.stackoverflow.com/ad/js",d=location.hash.indexOf("#large")>-1,a=location.hash.indexOf("#ninjas")>-1,c=location.hash.indexOf("#tagme")>-1,b,f=100,h="#adzerk2",e="#adzerk1",i="#herebeninjas";(function(){var b="min-height:220px;margin:15px 0",c=$("<div>").addClass("hireme").attr("style",b),a=$("<div>").html(c);document.write(a.html())})();$(function(){setTimeout(r,2e3);b=setTimeout(g,f)});var g=function(){clearTimeout(b);if(m()&&!k()){b=setTimeout(g,f);return}a=a||n();a&&$(e).css("height",$(e).outerHeight()).attr("id","stop-adzerk");if(l()&&!j()){b=setTimeout(g,f);return}d=d||o();p()},r=function(){clearTimeout(b);var a=$("div.hireme, "+i);a.each(function(){var a=$(this),d=a.html().replace(/\s+/g,"").length==0;if(d){var c=a,b=a.parents(".everyonelovesstackoverflow").first();if(b.length>0)c=b;c.remove()}})},l=function(){return $(h).length>0},j=function(){var a=$(h);return a.length==0?false:a.html().replace(/\s+/g,"").length>0},o=function(){return $("#careersadsdoublehigh").length>0},m=function(){return $(e).length>0},k=function(){var a=$(e);return a.length==0?false:a.html().replace(/\s+/g,"").length>0},n=function(){return $(i).length>0},p=function(){$.ajax({url:s(),dataType:"script",cache:true})},s=function(){var b=q+(d||a||c?"?":"");if(d)b+="large="+d.toString()+(a||c?"&":"");if(a)b+="banner="+a.toString()+(c?"&":"");if(c)b+="tagged="+c.toString();return b}})();
        </script>
    </div>

        <div style="margin-bottom: 10px;">
        
<style type="text/css">
#newsletter-ad {
    width: 190px;
    height: 250px;
    overflow: hidden;
    background: url('http://sstatic.net/stackoverflow/img//newsletter-ad.png');
    padding: 0 15px 0 15px;
}
#newsletter-ad-header {
    margin-top: 60px;
}
#newsletter-ad ul {
    margin: 1em 0 1em 1.5em;
}
#newsletter-ad ul li {
    margin-bottom: 5px;
}
#newsletter-signup-container {
    text-align: center;
}
#newsletter-preview-container {
    margin-top: 10px;
    text-align: center;
}
#newsletter-email-input {
    width: 200px;
}
</style>

<script>
    StackExchange.ready(function () {
        StackExchange.newsletterAd.init();
    });
</script>

<div id="newsletter-ad">
    <p id="newsletter-ad-header">Get the <strong>weekly newsletter!</strong></p>
    <ul>
        <li>Top questions and answers</li>
        <li>Important announcements</li>
        <li>Unanswered questions</li>
    </ul>
    <div id="newsletter-signup-container"><input id="newsletter-signup" type="button" value="Sign up for the newsletter" /></div>
    <p id="newsletter-preview-container">see an <a href="http://stackexchange.com/newsletters/newsletter?site=stackoverflow.com" id="newsletter-preview">example newsletter</a></p>
</div>

    </div>
  

    <div class="module">
    <h4 id="h-related">Related</h4>
    <div class="related">
    <div class="spacer">
<a href="/questions/774774/how-to-select-table-cells-without-selecting-nested-table-cells-in-jquery" class="question-hyperlink">How to select table cells without selecting nested table cells in jQuery</a>
</div>
<div class="spacer">
<a href="/questions/795861/makearray-function-in-sizzle-jquery-1-3" class="question-hyperlink">makeArray function in Sizzle (jQuery 1.3)</a>
</div>
<div class="spacer">
<a href="/questions/969647/jquery-selector-bug-composed-selector-vs-simple-selector-find" class="question-hyperlink">jQuery selector bug? composed selector vs. simple selector &amp; find()</a>
</div>
<div class="spacer">
<a href="/questions/2030774/adding-sizzle-js-to-my-project-breaks-the-project" class="question-hyperlink">Adding Sizzle js to my project breaks the project</a>
</div>
<div class="spacer">
<a href="/questions/2067216/using-jquerys-sizzle-engine-to-find-a-class-advanced" class="question-hyperlink">Using jQuery&#39;s Sizzle Engine to find a class (advanced)</a>
</div>
<div class="spacer">
<a href="/questions/2385844/jquery-sizzle-selector-to-find-current-elements-parent" class="question-hyperlink">jQuery/Sizzle selector to find current element&#39;s parent?</a>
</div>
<div class="spacer">
<a href="/questions/2479377/including-a-minified-js-code-in-another-js-library" class="question-hyperlink">Including a minified js code in another js library</a>
</div>
<div class="spacer">
<a href="/questions/2722109/is-there-a-jquery-dom-manipulator-css-selector-equivalent-class-in-php" class="question-hyperlink">Is there a JQuery DOM manipulator/CSS selector equivalent class in PHP?</a>
</div>
<div class="spacer">
<a href="/questions/2857058/minified-sizzle" class="question-hyperlink">Minified Sizzle</a>
</div>
<div class="spacer">
<a href="/questions/3230727/jquery-optimization-best-practices" class="question-hyperlink">jQuery Optimization/Best Practices</a>
</div>
<div class="spacer">
<a href="/questions/3358610/what-jquery-selector-can-i-use-to-match-these-html-elements-requires-contains" class="question-hyperlink">What jQuery selector can I use to match these HTML elements (requires &quot;:contains()&quot;)?</a>
</div>
<div class="spacer">
<a href="/questions/3382925/cant-iterate-array-returned-from-sizzle" class="question-hyperlink">Can&#39;t iterate array returned from Sizzle</a>
</div>
<div class="spacer">
<a href="/questions/3944878/jquery-subtle-difference-between-has-and-has" class="question-hyperlink">jQuery: subtle difference between .has() and :has()</a>
</div>
<div class="spacer">
<a href="/questions/3952817/decoupling-jquery-sizzle" class="question-hyperlink">decoupling jquery, sizzle?</a>
</div>
<div class="spacer">
<a href="/questions/3968416/ie-javascript-error-object-doesnt-support-this-property-or-method-within-jquer" class="question-hyperlink">IE Javascript error &quot;Object doesn&#39;t support this property or method&quot; within jQuery</a>
</div>
<div class="spacer">
<a href="/questions/4051321/can-i-use-a-selector-engine-like-sizzle-to-compare-css-selectors" class="question-hyperlink">Can I use a selector engine like sizzle to compare css selectors?</a>
</div>
<div class="spacer">
<a href="/questions/4402597/does-body-use-sizzle-engine" class="question-hyperlink">Does $(&quot;body&quot;) use Sizzle Engine?</a>
</div>
<div class="spacer">
<a href="/questions/5221136/jquery-ahref-example-cross-browser-issue" class="question-hyperlink">jQuery `a[href=#/example]` cross-browser issue</a>
</div>
<div class="spacer">
<a href="/questions/5744997/how-do-i-extend-jquerys-selector-engine-to-warn-me-when-a-selector-is-not-found" class="question-hyperlink">How do I extend jQuery&#39;s selector engine to warn me when a selector is not found?</a>
</div>
<div class="spacer">
<a href="/questions/5829106/jquery-selectors-problem-and-efficiency" class="question-hyperlink">jquery selectors problem and efficiency</a>
</div>
<div class="spacer">
<a href="/questions/5952853/is-there-a-way-to-validate-a-sizzle-selector" class="question-hyperlink">Is there a way to validate a Sizzle selector?</a>
</div>
<div class="spacer">
<a href="/questions/5992791/get-iframe-contents-with-a-jquery-selector" class="question-hyperlink">Get iframe contents with a jquery selector</a>
</div>
<div class="spacer">
<a href="/questions/6505987/jquery-finding-an-element-with-multiple-html-tag-attributes-in-it" class="question-hyperlink">jQuery - finding an element with multiple HTML tag attributes in it</a>
</div>
<div class="spacer">
<a href="/questions/6848259/looking-for-info-regarding-internal-implementation-of-jquery-selector-engine-siz" class="question-hyperlink">Looking for info regarding internal implementation of jQuery selector engine (sizzle)</a>
</div>
<div class="spacer">
<a href="/questions/7183522/very-weird-chrome-behavior-in-an-open-focused-select-element" class="question-hyperlink">Very weird Chrome behavior in an open (focused) &quot;select&quot; element</a>
</div>

    </div>
    </div>
</div>

<div id="feed-link">
    <div id="feed-link-text"><a href="/feeds/question/7262116" title="feed of this question and its answers"><span class="feed-icon"></span>question feed</a></div>
</div>
<script type="text/javascript" src="/posts/7262116/ivc/cd1b"></script>
<noscript>
    <div><img src="/posts/7262116/ivc/cd1b" class="dno" alt=""></div>
</noscript>
<div style="display:none" id="prettify-lang">default</div>
        </div>
    </div>
    <div id="footer">
        <div class="footerwrap">
            <div id="footer-menu">
                <a href="/about">about</a> |
                <a href="/faq">faq</a> |
                
                    <span onclick="if(window.localStorage){localStorage.setItem('blog-new',1314903616000); $('.new-blog-post').fadeOut();}">
                        <script>if(!window.localStorage || new Date(+localStorage.getItem('blog-new'))<new Date())document.write('<span title="SE Podcast #16, by Alex Miller - 13 mins ago" class="new-blog-post">new<\/span>');</script>
                        <a href="http://blog.stackexchange.com">blog</a>
                    </span> |
                    <a href="http://chat.stackoverflow.com">chat</a> |
                <a href="http://data.stackexchange.com">data</a> |
                <a href="http://blog.stackoverflow.com/category/podcasts/">podcast</a> |
                <a href="http://shop.stackexchange.com/">shop</a> |
                <a href="http://stackexchange.com/legal">legal</a> |
                <a href="http://engine.adzerk.net/redirect/0/2776/2751/0/4de3c60f719c4dfcb1a57531c7050090/0">advertising info</a> |

                <a onclick="StackExchange.switchMobile('on', '/questions/7262116/jquery-selectors-efficiency')">mobile</a> |

                <b><a href="mailto:team@stackoverflow.com">contact us</a></b>
                  | <b><a href="http://meta.stackoverflow.com">feedback</a></b>
                <div id="footer-sites">
                    
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackoverflow.com">stackoverflow.com</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackapps.com">api/apps</a>&nbsp; 
                        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://careers.stackoverflow.com">careers</a>&nbsp; 
                        <span style="color:#E8272C;font-size:140%">&#9632;</span>&nbsp;<a href="http://serverfault.com">serverfault.com</a>&nbsp; 
                        <span style="color:#00AFEF;font-size:140%">&#9632;</span>&nbsp;<a href="http://superuser.com">superuser.com</a>&nbsp; 
                        <span style="color:#969696;font-size:140%">&#9632;</span>&nbsp;<a href="http://meta.stackoverflow.com">meta</a>&nbsp; 
                        <span style="color:#46937D;font-size:140%">&#9632;</span>&nbsp;<a href="http://area51.stackexchange.com">area&nbsp;51</a>&nbsp; 
                        <span style="color:#C0D0DC;font-size:140%">&#9632;</span>&nbsp;<a href="http://webapps.stackexchange.com">webapps</a>&nbsp; 
                        <span style="color:#000000;font-size:140%">&#9632;</span>&nbsp;<a href="http://gaming.stackexchange.com">gaming</a>&nbsp; 
                        <span style="color:#dd4814;font-size:140%">&#9632;</span>&nbsp;<a href="http://askubuntu.com">ubuntu</a>&nbsp; 
                        <span style="color:#9ce4fe;font-size:140%">&#9632;</span>&nbsp;<a href="http://webmasters.stackexchange.com">webmasters</a>&nbsp; 
                        <span style="color:#cf4d3f;font-size:140%">&#9632;</span>&nbsp;<a href="http://cooking.stackexchange.com">cooking</a>&nbsp; 
                        <span style="color:#f4f28d;font-size:140%">&#9632;</span>&nbsp;<a href="http://gamedev.stackexchange.com">game development</a>&nbsp; 
                        <span style="color:#0f3559;font-size:140%">&#9632;</span>&nbsp;<a href="http://math.stackexchange.com">math</a>&nbsp; 
                        <span style="color:#f2f2f2;font-size:140%">&#9632;</span>&nbsp;<a href="http://photo.stackexchange.com">photography</a>&nbsp; 
                        <span style="color:#037187;font-size:140%">&#9632;</span>&nbsp;<a href="http://stats.stackexchange.com">stats</a>&nbsp; 
                        <span style="color:#f1e7cc;font-size:140%">&#9632;</span>&nbsp;<a href="http://tex.stackexchange.com">tex</a>&nbsp; 
                        <span style="color:#e1cdae;font-size:140%">&#9632;</span>&nbsp;<a href="http://english.stackexchange.com">english</a>&nbsp; 
                        <span style="color:#a2d9f6;font-size:140%">&#9632;</span>&nbsp;<a href="http://cstheory.stackexchange.com">theoretical cs</a>&nbsp; 
                        <span style="color:#1b3e6c;font-size:140%">&#9632;</span>&nbsp;<a href="http://programmers.stackexchange.com">programmers</a>&nbsp; 
                        <span style="color:#293a5d;font-size:140%">&#9632;</span>&nbsp;<a href="http://unix.stackexchange.com">unix</a>&nbsp;
                        <span style="color:#bec0cb;font-size:140%">&#9632;</span>&nbsp;<a href="http://apple.stackexchange.com">apple</a>&nbsp;
                        <span style="color:#939185;font-size:140%">&#9632;</span>&nbsp;<a href="http://wordpress.stackexchange.com">wordpress</a>&nbsp;
                        <span style="color:#b5cda4;font-size:140%">&#9632;</span>&nbsp;<a href="http://physics.stackexchange.com">physics</a>&nbsp;
                        <span style="color:#4176ab;font-size:140%">&#9632;</span>&nbsp;<a href="http://diy.stackexchange.com">home&nbsp;improvement</a>&nbsp;
                        <span style="color:#d1d8d7;font-size:140%">&#9632;</span>&nbsp;<a href="http://gis.stackexchange.com">gis</a>&nbsp;
                        <span style="color:#e5e2d3;font-size:140%">&#9632;</span>&nbsp;<a href="http://electronics.stackexchange.com">electronics</a>&nbsp;
                        <span style="color:#a4c639;font-size:140%">&#9632;</span>&nbsp;<a href="http://android.stackexchange.com">android</a>&nbsp;
                        <span style="color:#2e4e60;font-size:140%">&#9632;</span>&nbsp;<a href="http://security.stackexchange.com">security</a>&nbsp;
                        <span style="color:#45bcb5;font-size:140%">&#9632;</span>&nbsp;<a href="http://bicycles.stackexchange.com">bicycles</a>&nbsp;
                        <span style="color:#00adee;font-size:140%">&#9632;</span>&nbsp;<a href="http://dba.stackexchange.com">dba</a>&nbsp;
                        <span style="color:#2edaf0;font-size:140%">&#9632;</span>&nbsp;<a href="http://drupal.stackexchange.com">drupal</a>&nbsp;
                </div>
            </div>
            <div id="footer-flair">
                <a class="peer1" href="http://www.peer1.com/stackoverflow"></a>  
                    <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="cc-wiki-link"></a>
                <div id="svnrev">rev 2011.8.31.1</div>
            </div>
            <div id="copyright">
                site design / logo &copy; 2011 stack exchange inc; 
                user contributions licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">cc-wiki</a> with <a href="http://blog.stackoverflow.com/2009/06/attribution-required/" rel="license">attribution required</a>
            </div>
            

        </div>
    </div>

Test runner

Ready to run.

Testing in
TestOps/sec
Just id
$("#comment-8738980")
ready
Over specified id
$("tr#comment-8738980")
ready
Just class
$(".youarehere")
ready
Over specified class
$("li.youarehere")
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.