jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Comparing speed between jQuery, YUI and querySelector
<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. <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>
</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> </td>
<td> </td>
</tr>
<tr>
<td> </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%"> </td>
</tr>
</table>
</td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td ID="CellG">CellG
<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 </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>Ready to run.
| Test | Ops/sec | |
|---|---|---|
| jQuery div | | ready |
| YUI div | | ready |
| Native div | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.