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
Compare which is the better alternative, use a div element with a shifting background, or an Image object drawed upon a canvas element.
<div id="d1" style="width: 130px; height: 130px;">
</div>
<canvas id="c1" width="130" height="130">
</canvas>
<script>
var width = 130;
var height = 130;
var spriteStartWidth = 130 * 9;
var offset = 0;
var imgUrl = "http://dl.dropbox.com/u/6948808/test.jpg";
//var d = document.createElement("div");
var d = document.getElementById("d1");
//d.style.cssText = "width:" + width + "px; height:" + height + "px";
d.style.backgroundImage = "url(" + imgUrl + ")";
//var c = document.createElement("canvas");
var c = document.getElementById("c1");
c.width = width;
c.height = height;
var imgSprite = new Image(width, height);
imgSprite.src = imgUrl;
var ctx = c.getContext('2d');
// when image has loaded, draw on canvas elements
imgSprite.onload = function() {
ctx.drawImage(imgSprite, offset, 0, width, height, 0, 0, width, height);
};
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
CSS Sprite offset |
| ready |
Canvas offset |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.