render-vs-prerender

JavaScript performance comparison

Revision 117 of this test case created by ray

Preparation code

    <canvas id="canvas1" width="500" height="500"></canvas>
    <script>
      var can = document.getElementById('canvas1');
      var ctx = can.getContext('2d');
      
      var can2 = document.createElement('canvas');
      can2.width = 500;
      can2.height = 500;
      var ctx2 = can2.getContext('2d');
      
      var circles = [];

      for(var i = 0; i < 30; i++){
        circles.push({x: Math.random()*500, y: Math.random()*500});
      }

      ctx2.beginPath();
      ctx2.arc(10, 10, 10, 0, 2 * Math.PI);
      ctx2.fillStyle = "rgba(97,148,188,0.5)";
      ctx2.fill();
      ctx2.lineWidth = 0;
      ctx2.strokeStyle = "rgba(97,148,188,0.5)";
      ctx2.stroke();

</script>
    

Preparation code output

<canvas id="canvas1" width="500" height="500"></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
render
ctx.clearRect(0,0,500,500);

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(97,148,188,0.5)";
      ctx.fill();
      ctx.lineWidth = 0;
      ctx.strokeStyle = "rgba(97,148,188,0.5)";
      ctx.stroke();
}
pending…
pre-rendered
ctx.clearRect(0,0,500,500);

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
ctx.drawImage(can2, circle.x-10, circle.y-10);
}
pending…
render-opt
ctx.clearRect(0,0,500,500);

ctx.fillStyle = "rgba(97,148,188,0.5)";
ctx.lineWidth = 0;
ctx.strokeStyle = "rgba(97,148,188,0.5)";
for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
}
pending…
no stroke
ctx.clearRect(0,0,500,500);

for(var i = 0; i < circles.length; i++){
var circle = circles[i];
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(97,148,188,0.5)";
      ctx.fill();
      ctx.lineWidth = 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