jQuery v querySelector (v6)

Revision 6 of this benchmark created on

Description

I'm building the test on http://mootools.net/slickspeed/ but for jQuery and native document.querySelectorAll only.

So far: Jquery (Sizzle) is much faster with very simple selectors but querySelectorAll is a little (!!) faster with advanced selectors.

Preparation HTML

<H1>This is a test page for DOM traversal.</H1> 
<p>JavaScript must be enabled and browser must be DOM compliant for this example
to work.&nbsp;&nbsp;<br> 
Tested with Netscape 6.2, Netscape7, Internet Explorer 6, and Firefox 1.02 on
Windows XP</p> 
<table id='myTable' bgcolor="#CCFFCC" border="1"> 
  <tr id="Row1"> 
    <td id="CellA"> 
      <b>Cell A<br> 
      This is a bold text</b> 
    </td> 
    <td id="CellB"> 
      <font face="Arial Black"> 
      <font color="#FF0000">CellB:<br></font> 
    <i><b>This is a Bold Italic Text</b></i></font> 
    </td> 
    <td ID="CellC"> 
      <form> 
        <SPAN>Cell C<br> 
        Form Test (the buttons don't do anything)<br> 
        <br> 
        </SPAN><input type="radio" value="V1" checked name="R1"> 
        <input type="submit" value="Submit" name="B1"> 
        <input type="reset" value="Reset" name="B2"> 
      </form> 
      &nbsp;</td> 
  </tr> 
  <tr> 
    <td id="CellD">CellD
      <ul> 
        <li>Item1</li> 
        <li>Item2</li> 
        <li>Item3</li> 
      </ul> 
    </td> 
    <td ID="CellE">CellE
      <ol> 
        <li>One</li> 
        <li ID="ElementE1">Two <b>(ElementlE1)</b> 
          <ul> 
            <li>TwoA</li> 
            <li>TwoB</li> 
          </ul> 
        </li> 
        <li>Three</li> 
        <li>Four<br> 
          <img border="0" src="images/map.gif" width="29" height="29"></li> 
        <li>Five</li> 
      </ol> 
    </td> 
    <td ID="CellF"> 
      <h1>Cell F (H1)</h1> 
      <p>Subtables</p> 
      <table width="100%" bgcolor="#CCCCFF" border="1"> 
        <tr> 
          <td>&nbsp;</td> 
          <td>&nbsp;</td> 
        </tr> 
        <tr> 
          <td>&nbsp;</td> 
          <td> 
            <table width="100%" bgcolor="#FFFFCC" border="2"> 
              <tr> 
                <td width="50%"> 
                  <table border="1" width="100%" bgcolor="#0000FF"> 
                    <tr class="example"> 
                      <td class="example" width="100%">&nbsp;</td> 
                    </tr> 
                  </table> 
                </td> 
                <td width="50%">&nbsp;</td> 
              </tr> 
              <tr> 
                <td width="50%">&nbsp;</td> 
                <td width="50%">&nbsp;</td> 
              </tr> 
            </table> 
          </td> 
        </tr> 
      </table> 
    </td> 
  </tr> 
  <tr> 
    <td ID="CellG">CellG&nbsp;
      <h1>H1</h1> 
      <h2>H2</h2> 
      <h3>H3</h3> 
      <h4>H4</h4> 
      <pre>PRE</pre> 
    </td> 
    <td ID="CellH"><font color="#FF0000"><b>Cell H<br> 
    </b></font><img border="0" src="images/map.gif" width="102" height="103"></td> 
    <td width="31%">Cell&nbsp;</td> 
  </tr> 
</table> 
 
<p>Click the button to see the DOM tree of the <b>CellA</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellA')); return true;" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellB</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellB'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellC</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellC'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellD</b> object on this html page:
<input class="example" onClick="javascript=printDOMTree(document.getElementById('CellD'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellE</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellE'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>ElementE1</b> object on this html page:
<input class="example" onClick="javascript=printDOMTree(document.getElementById('ElementE1'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellF</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellF'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellG</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellG'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellH</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellH'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>CellI</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('CellI'));" type="submit" value="Submit"> </p> 
 
<p>Click the button to see the DOM tree of the <b>first row</b> on the table:
<input onClick="javascript=printDOMTree(document.getElementById('Row1'));" type="submit" value="Submit"> </p> 
 
 
<p>Click the button to see the DOM tree of the <b>2nd row</b> on the table:
<input onClick="javascript=printDOMTree(document.getElementById('Row1'));" type="submit" value="Submit"> </p> 
 
 
<p>Click the button to see the DOM tree of the <b> table</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('myTable'));" type="submit" value="Submit"> </p> 
 
 
<p>Click the button to see the DOM tree of the <b>document.html</b> object on this html page:
<input onClick="javascript=printDOMTree(document.getElementById('myHtml'));" type="submit" value="Submit"> </p> 
 
<p><a href="index.html">Back to the Tutorial</a>.</p> 
 
<p>(C) F. Permadi<a href="mailto:permadi@permadi.com"><br> 
permadi@permadi.com</a><br> 
</p> 



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

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery body
jQuery('body').length
ready
Native body
document.querySelectorAll('body').length
ready
jQuery div
jQuery('div').length
ready
Native div
document.querySelectorAll('div').length
ready
jQuery body div
jQuery('body div').length
ready
Native body div
document.querySelectorAll('body div').length
ready
jQuery div > p
jQuery('div > p').length
ready
Native div > p
document.querySelectorAll('div > p').length
ready
jQuery div + p
jQuery('div + p').length
ready
Native div + p
document.querySelectorAll('div + p').length
ready
jQuery div ~ p
jQuery('div ~ p').length
ready
Native div ~ p
document.querySelectorAll('div ~ p').length
ready
jQuery div[class^=exa][class$=mple]
jQuery('div[class^=exa][class$=mple]').length
ready
Native div[class^=exa][class$=mple]
document.querySelectorAll('div[class^=exa][class$=mple]').length
ready
jQuery div, p, a
jQuery('div, p, a').length
ready
Native div, p, a
document.querySelectorAll('div, p, a').length
ready
jQuery [class^=exa][class$=mple]
jQuery [class^=exa][class$=mple]
ready
Native [class^=exa][class$=mple]
Native [class^=exa][class$=mple]
ready

Revisions

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