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
This test compares the performance impact of four different jQuery scenarios:
1) Multiple selectors, multiple statements 2) Single selector, chained statements 3) Cached selector, multiple statements 4) addClass method, with or without caching
The goal is to identify the best way to handle jQuery selectors for optimum performance.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style type="text/css">
.classTest { color: red; opacity: 1; display: block; }
</style>
<!--Sample DOM-->
<header>
<h1>
Sample DOM
</h1>
</header>
<nav>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<div id="main">
<div id="content">
<div id="myDiv" class="myClass">
<p>
Sample content of non-consequence
</p>
</div>
</div>
</div>
<footer>
<a href="#">Terms</a>
</footer>
Ready to run.
Test | Ops/sec | |
---|---|---|
No Caching |
| ready |
Method Chaining |
| ready |
Object Caching |
| ready |
Object Caching + Chaining |
| ready |
No jQuery |
| ready |
No jQuery (cssText) |
| ready |
Normal jQuery |
| ready |
jQuery addClass() |
| ready |
jQuery addClass() + Caching |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.