lookup-canvas-perf

JavaScript performance comparison

Test case created

Preparation code

<canvas width="3000" height="3000" id="testCanvas" style="width: 100%; height: 500px">
</canvas>
<script src="https://dl.dropboxusercontent.com/u/24935738/jsperf/data.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var texture3Base64 = texture2Base64.replace('data:image/png;base64,', '');
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
largeAsync
// async test
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
};
img.src = texture1Base64;
pending…
largeSync
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.src = texture1Base64;
ctx.drawImage(img, 0, 0);
pending…
smallSyncWoHeader

var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.src = texture3Base64;
ctx.drawImage(img, 0, 0);
pending…
smallAsync
// async test
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
};
img.src = texture2Base64;
pending…
smallDisplayNone
var canvas = document.getElementById('testCanvas');
var ctx = canvas.getContext('2d');
canvas.style.display = 'none';
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0);
canvas.style.display = 'block';
pending…
smallReqAnFrame
// async test
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.src = texture2Base64;
window.requestAnimationFrame(function() {
  ctx.drawImage(img, 0, 0);
  deferred.resolve();
});
pending…
smallSync
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0);
pending…
smallSyncWithSize
var ctx = document.getElementById('testCanvas').getContext('2d');
var img = new Image();
img.src = texture2Base64;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.naturalWidth, img.naturalHeight);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment