render-vs-prerender

JavaScript performance comparison

Revision 136 of this test case created by Jan Aagaard Meier

Preparation code

<canvas id="canvas1" width="640" height="480"></canvas>
<script>
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

function render(context) {
  context.font = "20pt Arial";
  context.fillStyle = "black";
  context.fillText('Hello World', 50, 50);
}

var smallEmptyCanvas = document.createElement('canvas');
var smallEmptyContext = smallEmptyCanvas.getContext('2d');
smallEmptyCanvas.width = 100;
smallEmptyCanvas.height = 40;

var largeEmptyCanvas = document.createElement('canvas');
var largeEmptyContext = largeEmptyCanvas.getContext('2d');
largeEmptyCanvas.width = 600;
largeEmptyCanvas.height = 30;

var smallTextCanvas = document.createElement('canvas');
var smallTextContext = smallTextCanvas.getContext('2d');
smallTextCanvas.width = 100;
smallTextCanvas.height = 40;

var largeTextCanvas = document.createElement('canvas');
var largeTextContext = largeTextCanvas.getContext('2d');
largeTextCanvas.width = 600;
largeTextCanvas.height = 30;

render(smallTextContext);
render(largeTextContext);
</script>
    

Preparation code output

<canvas id="canvas1" width="640" height="480"></canvas>

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
large text canvas, snippet
ctx.drawImage(largeTextCanvas, 0, 0, 100, 40, 0, 0, 100, 40);
pending…
render
render(ctx);
pending…
small text canvas, full canvas
ctx.drawImage(smallTextCanvas, 0, 0);
pending…
large empty canvas, snippet
ctx.drawImage(largeEmptyCanvas, 0, 0, 100, 40, 0, 0, 100, 40);
pending…
large empty canvas, full canvas
ctx.drawImage(largeEmptyCanvas, 0, 0);
pending…
small empty canvas, full canvas
ctx.drawImage(smallEmptyCanvas, 0, 0);
pending…
large text canvas, full canvas
ctx.drawImage(largeTextCanvas, 0, 0);
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.

0 Comments