with statement

JavaScript performance comparison

Test case created by Nurbek

Info

Testing with statement performance against not using it.

Preparation code

<canvas></canvas>
<script>
  Benchmark.prototype.setup = function() {
        var canvas = document.querySelector("canvas");
            
        var context = canvas.getContext("2d"),
            centerX = (canvas.width / 2),
            centerY = (canvas.height / 2);
  };
</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
with_with
 
    with(canvas){
      style.border = "1px solid grey";
      style.backgroundColor = "gainsboro";
      width = 600;
      height = 600;
    }

    with(context){
      beginPath();
      moveTo(0, 0);
      lineTo(centerX, centerY);
      lineTo((centerX * 2), 0);
      closePath();
      fillStyle = "darkred";
      fill();
    
      beginPath();
      moveTo(0, 0);
      lineTo(centerX, centerY);
      lineTo(0, centerY * 2);
      closePath();
      fillStyle = "green";
      fill();
      
      beginPath();
      moveTo(0, centerY * 2);
      lineTo(centerX, centerY);
      lineTo(centerX * 2, centerY * 2);
      closePath();
      fillStyle = "brown";
      fill();
      
      beginPath();
      moveTo(centerX * 2, centerY * 2);
      lineTo(centerX, centerY);
      lineTo(centerX * 2, 0);
      closePath();
      fillStyle = "darkgreen";
      fill();
      
      fillStyle = "gold";
      fillRect((centerX / 2), (centerY / 2), 150, 150);
      fillStyle = "silver";
      fillRect(centerX, centerY, 150, 150);
    }
 pending…
without_with
 
      canvas.style.border = "1px solid grey";
      canvas.style.backgroundColor = "gainsboro";
      canvas.width = 600;
      canvas.height = 600;    
        
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(centerX, centerY);
      context.lineTo((centerX * 2), 0);
      context.closePath();
      context.fillStyle = "darkred";
      context.fill();
    
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(centerX, centerY);
      context.lineTo(0, centerY * 2);
      context.closePath();
      context.fillStyle = "green";
      context.fill();
      
      context.beginPath();
      context.moveTo(0, centerY * 2);
      context.lineTo(centerX, centerY);
      context.lineTo(centerX * 2, centerY * 2);
      context.closePath();
      context.fillStyle = "brown";
      context.fill();
      
      context.beginPath();
      context.moveTo(centerX * 2, centerY * 2);
      context.lineTo(centerX, centerY);
      context.lineTo(centerX * 2, 0);
      context.closePath();
      context.fillStyle = "darkgreen";
      context.fill();
      
      context.fillStyle = "gold";
      context.fillRect((centerX / 2), (centerY / 2), 150, 150);
      context.fillStyle = "silver";
      context.fillRect(centerX, centerY, 150, 150);    
 pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment