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
Use CSS to rotate a dom element, compared to drawing a rotated box on canvas
<canvas id="cvs" width="320" height="200" style="border: 1px solid #CCCCCC;"></canvas>
<div id="stage" style="position: relative; width: 320px; height: 200px; border: 1px solid #CCCCCC;">
<div id="dSpinner" style="position: absolute; width: 100px; height: 100px; background-color: black;"></div>
</div>
<script>
var ctx = document.getElementById("cvs").getContext('2d'),
dSpinner = document.getElementById("dSpinner"),
dRotation = 0,
cRotation = 0;
var box = [
[0, 0, 0],
[100, 0, 0],
[100, 100, 0],
[0, 100, 0]
];
// rotation matrix of 0.01 rads
var rotMatrix = [0.9999500004166653, 0.009999833334166664, 0, 0, -0.009999833334166664, 0.9999500004166653, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
ctx.globalAlpha = 0.1;
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
canvas (save/rotate/restore) |
| ready |
DOM (degrees) |
| ready |
canvas (transform points and draw) |
| ready |
canvas (transform points, then draw) |
| ready |
DOM (radians) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.