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
Test box model calculations
<style>
.test {
border: 1px solid #000;
float: left;
width: 25%;
padding: 5px
}
.test50 {
height: 50%
}
.bbox {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="cnt1" class="test" style="height:300px">
<p>Test Content</p>
</div>
<div id="cnt2" class="test test50">
<p>Test Content</p>
</div>
<div id="cnt3" class="test bbox" style="height:200px">
<p>Test Content</p>
</div>
<div id="cnt4" class="test test50 bbox">
<p>Test Content</p>
</div>
<script>
var $cnt1 = $("#cnt1");
var $cnt2 = $("#cnt2");
var $cnt3 = $("#cnt3");
var $cnt4 = $("#cnt4");
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
CSS Height Calc 1 |
| ready |
clientHeight Calc 1 |
| ready |
CSS Height Calc 2 |
| ready |
clientHeight Calc 2 |
| ready |
style calc 1 |
| ready |
style calc 2 |
| ready |
CSS BoxBorder Height Calc 1 |
| ready |
clientHeight BoxBorder Calc 1 |
| ready |
style BoxBorder calc 1 |
| ready |
CSS BoxBorder Height Calc 2 |
| ready |
clientHeight BoxBorder Calc 2 |
| ready |
style BoxBorder calc 2 |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.