sprite vs image

JavaScript performance comparison

Test case created by Mikhail Romanov

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div style="width: 400px; height: 400px; border: 2px solid green; position: relative; overflow: hidden;">
<div class="animation" id="animation-1" style="display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1371238/Eye-1.svg); background-size: cover; will-change: transform;"></div>
<div class="animation" id="animation-2" style="opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1371238/Eye-2.svg); background-size: cover; will-change: transform;"></div>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var animation = $('#animation-1');
  var animation2 = $('#animation-2');

};
</script>

Preparation code output

<div style="width: 400px; height: 400px; border: 2px solid green; position: relative; overflow: hidden;"> <div class="animation" id="animation-1" style="display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1371238/Eye-1.svg); background-size: cover; will-change: transform;"></div> <div class="animation" id="animation-2" style="opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1371238/Eye-2.svg); background-size: cover; will-change: transform;"></div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
image-source
var imgNumber = Math.floor(Math.random() * 18) + 1; 
animation.css('background-image', 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1371238/Eye-' + imgNumber + '.svg)');
pending…
image-opacity
var imgNumber = Math.floor(Math.random() * 2) + 1 ;
animation.css('opacity', '0');
animation2.css('opacity', '0');

imgNumber === 1 ? animation.css('opacity', '1') : animation2.css('opacity', '1');
pending…
sprite-position
var x = Math.random() * 100;
var y = Math.random() * 100;
animation.css('background-position', x + 'px ' + y + 'px');
pending…
sprite-transform
var x = Math.random() * 100;
var y = Math.random() * 100;
animation.css('transform', 'translate(' + x + 'px,' + y + 'px)');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments