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 the performance difference of varied jQuery 2.1.1 selectors. And specifficaly comparing jQuery selectors VS jQuery + Javascript selectors by conversion like $(document.getElementById("foo"));
This test page contains some dummy HTML (from html-ipsum.com) just to give the page some weight, make the selectors work a little bit.
Note that the "Tag" selector is selecting a tag that happens to be unique in the page just to be fair.
<style type="text/css">
.bar { display: none; }
</style>
<h1>
HTML Ipsum Presents
</h1>
<p>
<strong>
Pellentesque habitant morbi tristique
</strong>
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper.
<em>
Aenean ultricies mi vitae est.
</em>
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed,
<code>
commodo vitae
</code>
, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
ipsum rutrum orci, sagittis tempus lacus enim ac dui.
<a href="#">Donec non enim</a>
in turpis pulvinar facilisis. Ut felis.
</p>
<h2>
Header Level 2
</h2>
<ol>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
</ol>
<blockquote id="foo" class="bar" name="baz">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.
Donec eleifend, libero at <span style="display: none">iquet congue. Ut a est </span> sagittis mollis, tellus est malesuada tellus, at luctus
turpis elit sit amet quam. Vivamus pretium ornare est.
</p>
</blockquote>
<h3>
Header Level 3
</h3>
<ul>
<li name="koshka">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li>
Aliquam tincidunt mauris eu risus.
</li>
<li name="koshka">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
</ul>
<pre>
<code>
#header h1 a { display: block; width: 300px; height: 80px; }
</code>
</pre>
<form action="#" method="post">
<div id="foo2"><div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<label for="name2">Text Input #2:</label>
<input type="text" name="name2" id="name2" value="" tabindex="1" />
</div>
<div id="foo-radio-group">
<h4>Radio Button Choice</h4>
<label class="bare smile" for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" checked="checked" value="choice-2" />
<label class="bare smile" for="radio-choice-2">Choice 3</label>
<input type="radio" name="radio-choice-3" id="radio-choice-3" tabindex="4" value="choice-3" />
</div></div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="20" rows="2" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>
Ready to run.
Test | Ops/sec | |
---|---|---|
jQuery ID |
| ready |
jQuery Tag |
| ready |
jQuery Class |
| ready |
jQuery attribute |
| ready |
jQuery Pseudo-selector |
| ready |
jQuery Pseudo-selector with Id |
| ready |
jQuery Pseudo-selector with Id 2 |
| ready |
find() |
| ready |
filter() |
| ready |
Without find or filter |
| ready |
Conversion 1 |
| ready |
Conversion 2 |
| ready |
Conversion 3 |
| ready |
Attribute |
| ready |
Attribute + Filter |
| ready |
Attribute + Filter 2 |
| ready |
Two Clasess |
| ready |
One Class |
| ready |
Conversion 4 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.