bex

JavaScript performance comparison

Test case created

Preparation code


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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
bex1
$(document).ready(function() {
  // When clicking on the button close or the mask layer the popup closed
  //code for creating canvas for all the expenseContainer div on document ready
  /*var totalExpenseContainer = $(".expenseContainer").length;
        //alert( "expenseContainer total" + totalExpenseContainer );
        $('.expenseContainer').each(function(index) {
                //alert('how many divs')
                //loadCanvas(index);
                var canvas = document.createElement('canvas');
            canvas.id = "c" + index.toString();        
           canvas.style.zIndex   = 0;
       
           $(this).after(canvas);  
        });*/

  $(function() {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
  });

  //remove div when minus is clicked
  $('button').on('click', function() {
    //alert('minus clicked');
    //$(this).closest('.singlerow').remove();
    //var buttonid = this.id;

    //console.log('id of button' + buttonid);
    // var mybutton = $(this).data('value');
    //console.log('button number:' + mybutton);
    var buttonNumber = $(this).attr('class').replace(/b/, '');
    console.log('button number:' + buttonNumber);
    //find button's top parent div
    var parentli = $(this).closest('li');
    //.attr('id');
    console.log('li parent of button' + parentli);
    var containerClassname = parentli.parent().parent().attr('class');
    //alert('classname of the container div '+ containerClassname);
    rockOut(buttonNumber, containerClassname);

    // $(this).closest('.listDiv').hide('scale', {}, 1000);




  });


  var canvas;
  var context2D;

  var particles = [];

  function randomFloat(min, max) {
    return min + Math.random() * (max - min);
  }

  /*
   * A single explosion particle
   */


  function Particle() {
    this.scale = 1.0;
    this.x = 0;
    this.y = 0;
    this.radius = 20;
    this.color = "#000";
    this.velocityX = 0;
    this.velocityY = 0;
    this.scaleSpeed = 0.5;

    this.update = function(ms) {
      // shrinking
      this.scale -= this.scaleSpeed * ms / 1000.0;

      if (this.scale <= 0) {
        this.scale = 0;
      }

      // moving away from explosion center
      this.x += this.velocityX * ms / 1000.0;
      this.y += this.velocityY * ms / 1000.0;
    };

    this.draw = function(context2D) {
      // translating the 2D context to the particle coordinates
      context2D.save();
      context2D.translate(this.x, this.y);
      context2D.scale(this.scale + 0.5, this.scale + 0.5);

      // drawing a filled circle in the particle's local space
      context2D.beginPath();
      context2D.arc(0, 0, this.radius, 0, Math.PI * 2, true);
      context2D.closePath();

      context2D.fillStyle = this.color;
      context2D.fill();

      context2D.restore();
    };
  }

  /*
   * Advanced Explosion effect
   * Each particle has a different size, move speed and scale speed.
   *
   * Parameters:
   *    x, y - explosion center
   *    color - particles' color
   */


  function createExplosion(x, y, color) {
    /*
                        var minSize = 10;
                        var maxSize = 30;
                        var count = 10;
                        var minSpeed = 60.0;
                        var maxSpeed = 200.0;
                        var minScaleSpeed = 1.0;
                        var maxScaleSpeed = 4.0;*/


    var minSize = 10;
    var maxSize = 20;
    var count = 50;
    var minSpeed = 60.0;
    var maxSpeed = 200.0;
    var minScaleSpeed = 1.0;
    var maxScaleSpeed = 4.0;

    console.log('inside create explosion x y ' + x + ' and ' + y);

    for (var angle = 0; angle < 360; angle += Math.round(360 / count)) {
      var particle = new Particle();

      particle.x = x;
      particle.y = y;

      particle.radius = randomFloat(minSize, maxSize);

      particle.color = color;

      particle.scaleSpeed = randomFloat(minScaleSpeed, maxScaleSpeed);

      var speed = randomFloat(minSpeed, maxSpeed);

      particle.velocityX = speed * Math.cos(angle * Math.PI / 180.0);
      particle.velocityY = speed * Math.sin(angle * Math.PI / 180.0);

      particles.push(particle);
    }
  }

  function update(frameDelay) {
    // draw a white background to clear canvas
    context2D.fillStyle = "#FFF";
    //context2D.fillRect(0, 0, context2D.canvas.width, context2D.canvas.height);
    context2D.clearRect(0, 0, context2D.canvas.width, context2D.canvas.height);
    // update and draw particles
    for (var i = 0; i < particles.length; i++) {
      var particle = particles[i];

      particle.update(frameDelay);
      particle.draw(context2D);
    }
  }

  window.addEvent("load", function() {
    // on load what to do?
  });


  function rockOut(buttonNumber, containerClassname) {
    //var clickedButton = document.getElementById(mybutton);


    var canvas = document.createElement('canvas');
    canvas.id = containerClassname + "c" + buttonNumber;
    canvas.style.zIndex = 0;
    var containerIndex = buttonNumber - 1;
    var tempCanvasDiv = document.getElementsByClassName(containerClassname)[containerIndex];

    tempCanvasDiv.appendChild(canvas);
    var temp_lis = $("#" + containerClassname + "li" + buttonNumber);
    var temp_canvas = document.getElementById(containerClassname + "c" + buttonNumber);
    var temp_list1 = document.getElementById(containerClassname + "li" + buttonNumber);
    var $this = $("#" + containerClassname + "c" + buttonNumber);

    //var myThisStatic = $(assetsContainer#c1);

    var lis = temp_lis;
    //console.log(lis.height()+" "+lis.width());
    canvas = temp_canvas;

    console.log('canvas ' + canvas + ' containerIndex ' + containerIndex + ' tempCanvasDiv ' + tempCanvasDiv + ' myThis ' + $this);

    // check if browser supports canvas
    if (canvas && canvas.getContext) {
      // canvas and 2D context initialization
      canvas.height = lis.height();
      canvas.width = lis.width();
      context2D = canvas.getContext("2d");

      //document.id(mybutton).addEvent("click", function() {

      //var x = $this.position().left + ($this.outerWidth(true)/2) ;
      //var y = $this.position().top + ($this.outerHeight(true)/2) ;
      //console.log("left: "+$this.position().left+" top: "+$this.position().top+" X: "+x+" Y: "+y+" outerwidth: "+$this.outerWidth(true)+" outerHeight: "+$this.outerHeight(true));
      var x = ($this.outerWidth(true) / 2);
      var y = ($this.outerHeight(true) / 2);
      console.log("x: " + x + " y: " + y);
      createExplosion(x, y, "#00A8E6");

      // make list item disappear
      $(temp_list1).delay(10).fadeOut(1000).promise(function() {
        $(temp_list1).remove();
      });

      // make canvas disappear
      $(temp_canvas).delay(10).fadeOut(1000).promise(function() {
        $(temp_canvas).remove();
      });

      var parentdiv = $(temp_canvas).parent();
      parentdiv.css('padding', '0px');

      //});

      // starting the game loop at 60 frames per second
      var frameRate = 60.0;
      var frameDelay = 1000.0 / frameRate;

      setInterval(function() {
        update(frameDelay);
      }, frameDelay);

    } else {
      alert("Canvas not supported in your browser.");
    }
  }






});
pending…
bex2
$(document).ready(function() {
  // When clicking on the button close or the mask layer the popup closed
  //code for creating canvas for all the expenseContainer div on document ready
  /*var totalExpenseContainer = $(".expenseContainer").length;
        //alert( "expenseContainer total" + totalExpenseContainer );
        $('.expenseContainer').each(function(index) {
                //alert('how many divs')
                //loadCanvas(index);
                var canvas = document.createElement('canvas');
            canvas.id = "c" + index.toString();        
           canvas.style.zIndex   = 0;
       
           $(this).after(canvas);  
        });*/

  $(function() {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
  });

  //remove div when minus is clicked
  $('button').on('click', function() {
    //alert('minus clicked');
    //$(this).closest('.singlerow').remove();
    //var buttonid = this.id;

    //console.log('id of button' + buttonid);
    // var mybutton = $(this).data('value');
    //console.log('button number:' + mybutton);
    var buttonNumber = $(this).attr('class').replace(/b/, '');
    console.log('button number:' + buttonNumber);
    //find button's top parent div
    var parentli = $(this).closest('li');
    //.attr('id');
    console.log('li parent of button' + parentli);
    var containerClassname = parentli.parent().parent().attr('class');
    //alert('classname of the container div '+ containerClassname);
    rockOut(buttonNumber, containerClassname);

    // $(this).closest('.listDiv').hide('scale', {}, 1000);




  });


  var canvas;
  var context2D;

  var particles = [];

  function randomFloat(min, max) {
    return min + Math.random() * (max - min);
  }

  /*
   * A single explosion particle
   */


  function Particle() {
    this.scale = 1.0;
    this.x = 0;
    this.y = 0;
    this.radius = 20;
    this.color = "#000";
    this.velocityX = 0;
    this.velocityY = 0;
    this.scaleSpeed = 0.5;

    this.update = function(ms) {
      // shrinking
      this.scale -= this.scaleSpeed * ms / 1000.0;

      if (this.scale <= 0) {
        this.scale = 0;
      }

      // moving away from explosion center
      this.x += this.velocityX * ms / 1000.0;
      this.y += this.velocityY * ms / 1000.0;
    };

    this.draw = function(context2D) {
      // translating the 2D context to the particle coordinates
      context2D.save();
      context2D.translate(this.x, this.y);
      context2D.scale(this.scale + 0.5, this.scale + 0.5);

      // drawing a filled circle in the particle's local space
      context2D.beginPath();
      context2D.arc(0, 0, this.radius, 0, Math.PI * 2, true);
      context2D.closePath();

      context2D.fillStyle = this.color;
      context2D.fill();

      context2D.restore();
    };
  }

  /*
   * Advanced Explosion effect
   * Each particle has a different size, move speed and scale speed.
   *
   * Parameters:
   *    x, y - explosion center
   *    color - particles' color
   */


  function createExplosion(x, y, color) {
    /*
                        var minSize = 10;
                        var maxSize = 30;
                        var count = 10;
                        var minSpeed = 60.0;
                        var maxSpeed = 200.0;
                        var minScaleSpeed = 1.0;
                        var maxScaleSpeed = 4.0;*/


    var minSize = 10;
    var maxSize = 20;
    var count = 50;
    var minSpeed = 60.0;
    var maxSpeed = 200.0;
    var minScaleSpeed = 1.0;
    var maxScaleSpeed = 4.0;

    console.log('inside create explosion x y ' + x + ' and ' + y);

    for (var angle = 0; angle < 360; angle += Math.round(360 / count)) {
      var particle = new Particle();

      particle.x = x;
      particle.y = y;

      particle.radius = randomFloat(minSize, maxSize);

      particle.color = color;

      particle.scaleSpeed = randomFloat(minScaleSpeed, maxScaleSpeed);

      var speed = randomFloat(minSpeed, maxSpeed);

      particle.velocityX = speed * Math.cos(angle * Math.PI / 180.0);
      particle.velocityY = speed * Math.sin(angle * Math.PI / 180.0);

      particles.push(particle);
    }
  }

  function update(frameDelay) {
    // draw a white background to clear canvas
    context2D.fillStyle = "#FFF";
    //context2D.fillRect(0, 0, context2D.canvas.width, context2D.canvas.height);
    context2D.clearRect(0, 0, context2D.canvas.width, context2D.canvas.height);
    // update and draw particles
    for (var i = 0; i < particles.length; i++) {
      var particle = particles[i];

      particle.update(frameDelay);
      particle.draw(context2D);
    }
  }

  window.addEvent("load", function() {
    // on load what to do?
  });


  function rockOut(buttonNumber, containerClassname) {
    //var clickedButton = document.getElementById(mybutton);


    var canvas = document.createElement('canvas');
    canvas.id = containerClassname + "c" + buttonNumber;
    canvas.style.zIndex = 0;
    var containerIndex = buttonNumber - 1;
    var tempCanvasDiv = document.getElementsByClassName(containerClassname)[containerIndex];

    tempCanvasDiv.appendChild(canvas);
    var temp_lis = $("#" + containerClassname + "li" + buttonNumber);
    var temp_canvas = document.getElementById(containerClassname + "c" + buttonNumber);
    var temp_list1 = document.getElementById(containerClassname + "li" + buttonNumber);
    var $this = $("#" + containerClassname + "c" + buttonNumber);

    //var myThisStatic = $(assetsContainer#c1);

    var lis = temp_lis;
    //console.log(lis.height()+" "+lis.width());
    canvas = temp_canvas;

    console.log('canvas ' + canvas + ' containerIndex ' + containerIndex + ' tempCanvasDiv ' + tempCanvasDiv + ' myThis ' + $this);

    // check if browser supports canvas
    if (canvas && canvas.getContext) {
      // canvas and 2D context initialization
      canvas.height = lis.height();
      canvas.width = lis.width();
      context2D = canvas.getContext("2d");

      //document.id(mybutton).addEvent("click", function() {

      //var x = $this.position().left + ($this.outerWidth(true)/2) ;
      //var y = $this.position().top + ($this.outerHeight(true)/2) ;
      //console.log("left: "+$this.position().left+" top: "+$this.position().top+" X: "+x+" Y: "+y+" outerwidth: "+$this.outerWidth(true)+" outerHeight: "+$this.outerHeight(true));
      var x = ($this.outerWidth(true) / 2);
      var y = ($this.outerHeight(true) / 2);
      console.log("x: " + x + " y: " + y);
      createExplosion(x, y, "#00A8E6");

      // make list item disappear
      $(temp_list1).delay(10).fadeOut(1000).promise(function() {
        $(temp_list1).remove();
      });

      // make canvas disappear
      $(temp_canvas).delay(10).fadeOut(1000).promise(function() {
        $(temp_canvas).remove();
      });

      var parentdiv = $(temp_canvas).parent();
      parentdiv.css('padding', '0px');

      //});

      // starting the game loop at 60 frames per second
      var frameRate = 60.0;
      var frameDelay = 1000.0 / frameRate;

      setInterval(function() {
        update(frameDelay);
      }, frameDelay);

    } else {
      alert("Canvas not supported in your browser.");
    }
  }






});
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