jQuery v querySelectorAll (v2)

Revision 2 of this benchmark created on


Description

Comparing speed between jQuery and querySelectorAll

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>
<script src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo/yahoo-min.js&2.9.0/build/dom/dom-min.js&2.9.0/build/selector/selector-min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery td
jQuery('td')
ready
Native td
document.querySelectorAll("td")
ready

Revisions

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