render-vs-prerender

JavaScript performance comparison

Revision 17 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.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.fillStyle = "#ffc0cb";
  ctx2.strokeStyle = "#8b0000";
  ctx2.fill();
  ctx2.stroke();
</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.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();
ctx2.fillStyle = "#ffc0cb";
ctx2.strokeStyle = "#8b0000";
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