render-vs-prerender

JavaScript performance comparison

Revision 15 of this test case created by Bhavesh Bagadiya

Preparation code

<canvas id="canvas1" width="500" height="500">
</canvas>
<script>
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');
  var arrComplexPath = [51,10,54,6,57,3,61,1,65,0,70,0,74,0,79,2,84,4,88,8,92,13,94,18,96,25,97,31,97,37,96,42,95,48,93,52,91,58,89,61,87,66,84,69,81,74,78,78,74,82,71,85,68,88,64,92,61,94,58,97,55,100,52,102,48,105,44,102,42,100,39,98,37,96,33,93,30,90,27,87,24,84,21,81,18,77,15,74,13,70,10,67,8,63,6,58,4,54,2,49,1,44,0,39,0,34,0,29,0,24,2,19,3,15,5,12,7,9,10,6,13,4,17,2,20,0,24,0,28,0,31,0,35,1,38,3,41,5,44,7,46,11,48,15,51,10];

  var can2 = document.createElement('canvas');
  can2.width = 150;
  can2.height = 150;
  var ctx2 = can2.getContext('2d');

  var prevX = arrComplexPath[0];
  var prevY = arrComplexPath[1];
  var midX = prevX,
      midY = prevY;
ctx2.fillStyle = "#ffc0cb";
ctx2.stokeStyle = "#8b0000";
  ctx2.beginPath();
  for (var i = 2; i < arrComplexPath.length; i += 2) {

    var xTo = arrComplexPath[i],
        yTo = arrComplexPath[i + 1];


    ctx2.moveTo(midX, midY);

    midX = (prevX + xTo) / 2;
    midY = (prevY + yTo) / 2;

    ctx2.quadraticCurveTo(prevX, prevY, midX, midY);


    prevX = xTo;
    prevY = yTo;
  }

  //line from last mid point to end of path.
  ctx2.moveTo(midX, midY);
  ctx2.lineTo(xTo, yTo);
ctx2.closePath();
  ctx2.stroke();
  ctx2.fill();
</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
render
 
  var prevX = arrComplexPath[0];
  var prevY = arrComplexPath[1];

var midX = prevX,
    midY = prevY;
ctx2.fillStyle = "#ffc0cb";
ctx2.stokeStyle = "#8b0000";
ctx2.beginPath();
for (var i = 2; i < arrComplexPath.length; i += 2) {

  var xTo = arrComplexPath[i],
      yTo = arrComplexPath[i + 1];


  ctx.moveTo(midX, midY);

  midX = (prevX + xTo) / 2;
  midY = (prevY + yTo) / 2;

  ctx.quadraticCurveTo(prevX, prevY, midX, midY);


  prevX = xTo;
  prevY = yTo;
}

//line from last mid point to end of path.
ctx.moveTo(midX, midY);
ctx.lineTo(xTo, yTo);
ctx.closePath();
ctx.stroke();
ctx.fill();
 pending…
pre-rendered
 
ctx.drawImage(can2, 0, 300);
 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