jQuery v querySelector v YUI (v3)

Revision 3 of this benchmark created on

Description

Comparing speed between jQuery, YUI and querySelector

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 div
jQuery('div')
ready
YUI div
YAHOO.util.Selector.query("div")
ready
Native div
document.querySelector("div")
ready
getelementsbytagname
document.getElementsByTagName('div')
ready

Revisions

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