sdsdfdfs

JavaScript performance comparison

Test case created

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
asd
function randomRange (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}



$(document).ready(function()
{
    var blobArray = [];
    var canvas = document.getElementById('particles');
    var c = canvas.getContext('2d');

    var width = $(window).width();
    var height = $(window).height();  

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
       
        loadWebsite();
    }

    preload([
        'img/background.jpg',
        'img/topnote.png',
        'img/menu_button.png',
        'img/logo.png',
        'img/getintouch.png'
    ]);



    (function($,sr){

      // debouncing function from John Hann
      // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
      // smartresize
      jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

    })(jQuery,'smartresize');


    // usage:
    $(window).smartresize(function(){

        var width = $(window).width();
        var height = $(window).height();  
     
        $('canvas').attr('width', $(window).width());
        $('canvas').attr('height', $(window).height());

         $('#logo').css('top', $(window).height()/2 - $('#logo').height()/2)
                   .css('left', ($(window).width()/2) - ($('#logo').width()/2));
         
         $('#note').css('top', ($(window).height()/2) - ($('#note').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#note').width()/2));

         $('.sidebar .content').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20);
             
   
    });


    function loadWebsite(){

        $('body').addClass('loaded');
        $('.preload').fadeOut();
       
     
     
        $('canvas').attr('width', $(window).width());
        $('canvas').attr('height', $(window).height());

        $('#logo').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#logo').width()/2));

       $('.sidebar .content').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20);
       
        $('#note').css('top', ($(window).height()/2) - ($('#note').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#note').width()/2));

        var particle_count = 25;
     
    $('.menu').click(function()
    {
      if($('.sidebar').css('left') == '-320px'){
        $('.blurcontainer').addClass('blur');
        $('.sidebar').animate({left:'0'}, 500, 'swing', function()
          {
              $('body').click(function()
              {

                  $('.sidebar').animate({left:'-320px'}, 500, 'swing');
                  $('.blurcontainer').removeClass('blur');
                  $(this).unbind();
              })
          });
      }
    });
     


    $('#logo').animate({opacity: 1, top: '-=20px'}, 1200, 'swing', function()
        {
           for(var i = 0; i < particle_count; i++)
            {
              setTimeout(function(){ blobArray.push(new particle()); }, (i+1)*80);
            }
             
            $('.menu').click(function()
            {

              $('.menu-links').toggleClass('menu-links-on');

            });

        });

}

  function particle() {
    switch(randomRange(1,8)){
          case 4:
              this.x =  ((Math.random())*($(window).width()));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 10;
              this.ySpeed  = 5 + (Math.random()) * 3;
              this.size = 2 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.7;
           
            break;
          case 5:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 1;
              this.ySpeed  = 5 + (Math.random()) * 5;
              this.size = 18 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.55;
           
            break;
             case 3:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 7;
              this.ySpeed  = 5 + (Math.random()) * 7;
              this.size = 15 + ((Math.random() - 0.5)*1.5);
              this.opacity = 0.33;
           
            break;
              case 2:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 7;
              this.ySpeed  = 5 + (Math.random()) * 3;
              this.size = 4 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.7;
           
            break;
             default:
             
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -100;
              this.xSpeed  = (Math.random() - 0.5) * 12.5;
              this.ySpeed  = 10 + (Math.random()) * 10;
              this.size = 13;
              this.opacity = 0.2;
           
            break;
        }
  }

 


  function draw() {

    c.clearRect(0,0,width*2,height*2);

    for(var i = 0; i < blobArray.length; i++){

      var thisBlob = blobArray[i];

      c.beginPath();
      c.arc(thisBlob.x, thisBlob.y, thisBlob.size, 0, 2 * Math.PI, false);

      var radgrad = c.createRadialGradient(thisBlob.x, thisBlob.y , 0,  thisBlob.x , thisBlob.y , thisBlob.size);
      radgrad.addColorStop(0.7, 'rgba(255,255,255, '+thisBlob.opacity+')');
      radgrad.addColorStop(1, 'rgba(255,255,255,  '+(thisBlob.opacity*0.0)+')');

      c.fillStyle = radgrad;
      c.fill();

      thisBlob.x += thisBlob.xSpeed;
      thisBlob.y += thisBlob.ySpeed;

      if(thisBlob.y > width) {
      blobArray[i] = new particle();
    }
    }
  }

     function setupBrowser() {
                if (window.requestAnimationFrame) {
                    window.requestAnimFrame = window.requestAnimationFrame;
                    transformProperty = 'transform';
                } else if (window.webkitRequestAnimationFrame) {
                    window.requestAnimFrame = window.webkitRequestAnimationFrame;
                    transformProperty = 'webkitTransform';
                } else if (window.mozRequestAnimationFrame) {
                    window.requestAnimFrame = window.mozRequestAnimationFrame;
                    transformProperty = 'MozTransform';
                } else {
                    window.requestAnimFrame = function(callback) {
                        window.setTimeout(callback, 50000);
                    };
                }
            }
            setupBrowser();

            (function animloop() {
                window.requestAnimFrame(animloop);
                draw();
            })();

});
 
pending…
dsf
function randomRange (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}



$(document).ready(function()
{
    var blobArray = [];
    var canvas = document.getElementById('particles');
    var c = canvas.getContext('2d');

    var width = $(window).width();
    var height = $(window).height();  

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
       
        loadWebsite();
    }

    preload([
        'img/background.jpg',
        'img/topnote.png',
        'img/menu_button.png',
        'img/logo.png',
        'img/getintouch.png'
    ]);



    (function($,sr){

      // debouncing function from John Hann
      // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
      // smartresize
      jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

    })(jQuery,'smartresize');


    // usage:
    $(window).smartresize(function(){

        var width = $(window).width();
        var height = $(window).height();  
     
        $('canvas').attr('width', $(window).width());
        $('canvas').attr('height', $(window).height());

         $('#logo').css('top', $(window).height()/2 - $('#logo').height()/2)
                   .css('left', ($(window).width()/2) - ($('#logo').width()/2));
         
         $('#note').css('top', ($(window).height()/2) - ($('#note').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#note').width()/2));

         $('.sidebar .content').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20);
             
   
    });


    function loadWebsite(){

        $('body').addClass('loaded');
        $('.preload').fadeOut();
       
     
     
        $('canvas').attr('width', $(window).width());
        $('canvas').attr('height', $(window).height());

        $('#logo').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#logo').width()/2));

       $('.sidebar .content').css('top', ($(window).height()/2) - ($('#logo').height()/2) + 20);
       
        $('#note').css('top', ($(window).height()/2) - ($('#note').height()/2) + 20)
                  .css('left', ($(window).width()/2) - ($('#note').width()/2));

        var particle_count = 25;
     
    $('.menu').click(function()
    {
      if($('.sidebar').css('left') == '-320px'){
        $('.blurcontainer').addClass('blur');
        $('.sidebar').animate({left:'0'}, 500, 'swing', function()
          {
              $('body').click(function()
              {

                  $('.sidebar').animate({left:'-320px'}, 500, 'swing');
                  $('.blurcontainer').removeClass('blur');
                  $(this).unbind();
              })
          });
      }
    });
     


    $('#logo').animate({opacity: 1, top: '-=20px'}, 1200, 'swing', function()
        {
           for(var i = 0; i < particle_count; i++)
            {
              setTimeout(function(){ blobArray.push(new particle()); }, (i+1)*80);
            }
             
            $('.menu').click(function()
            {

              $('.menu-links').toggleClass('menu-links-on');

            });

        });

}

  function particle() {
    switch(randomRange(1,8)){
          case 4:
              this.x =  ((Math.random())*($(window).width()));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 10;
              this.ySpeed  = 5 + (Math.random()) * 3;
              this.size = 2 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.7;
           
            break;
          case 5:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 1;
              this.ySpeed  = 5 + (Math.random()) * 5;
              this.size = 18 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.55;
           
            break;
             case 3:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 7;
              this.ySpeed  = 5 + (Math.random()) * 7;
              this.size = 15 + ((Math.random() - 0.5)*1.5);
              this.opacity = 0.33;
           
            break;
              case 2:
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -50;
              this.xSpeed  = (Math.random() - 0.5) * 7;
              this.ySpeed  = 5 + (Math.random()) * 3;
              this.size = 4 + ((Math.random() - 0.5)*0.5);
              this.opacity = 0.7;
           
            break;
             default:
             
              this.x = ((Math.random())*($(window).width()*2));
              this.y  = -100;
              this.xSpeed  = (Math.random() - 0.5) * 12.5;
              this.ySpeed  = 10 + (Math.random()) * 10;
              this.size = 13;
              this.opacity = 0.2;
           
            break;
        }
  }

 


  function draw() {

    c.clearRect(0,0,width*2,height*2);

    for(var i = 0; i < blobArray.length; i++){

      var thisBlob = blobArray[i];

      c.beginPath();
      c.arc(thisBlob.x, thisBlob.y, thisBlob.size, 0, 2 * Math.PI, false);

      var radgrad = c.createRadialGradient(thisBlob.x, thisBlob.y , 0,  thisBlob.x , thisBlob.y , thisBlob.size);
      radgrad.addColorStop(0.7, 'rgba(255,255,255, '+thisBlob.opacity+')');
      radgrad.addColorStop(1, 'rgba(255,255,255,  '+(thisBlob.opacity*0.0)+')');

      c.fillStyle = radgrad;
      c.fill();

      thisBlob.x += thisBlob.xSpeed;
      thisBlob.y += thisBlob.ySpeed;

      if(thisBlob.y > width) {
      blobArray[i] = new particle();
    }
    }
  }

     function setupBrowser() {
                if (window.requestAnimationFrame) {
                    window.requestAnimFrame = window.requestAnimationFrame;
                    transformProperty = 'transform';
                } else if (window.webkitRequestAnimationFrame) {
                    window.requestAnimFrame = window.webkitRequestAnimationFrame;
                    transformProperty = 'webkitTransform';
                } else if (window.mozRequestAnimationFrame) {
                    window.requestAnimFrame = window.mozRequestAnimationFrame;
                    transformProperty = 'MozTransform';
                } else {
                    window.requestAnimFrame = function(callback) {
                        window.setTimeout(callback, 50000);
                    };
                }
            }
            setupBrowser();

            (function animloop() {
                window.requestAnimFrame(animloop);
                draw();
            })();

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