functionCreation_

JavaScript performance comparison

Test case created

Info

...

Preparation code

<html><head><style type="text/css">
.loader-outer {
  background:rgba(255,255,255,.6);
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:1000;
  display:none;
}
.loader-inner{
  position: absolute;
  background:transparent;
  width:500px;
  height:500px;
}
.loader-inner>img{
  position: absolute;
  left:218px;
  right:218px;
  top:218px;
  bottom:218px;
  width: 64px;
  display: none;
}</style>
</head><body>
<div class="loader-outer">
      <div class="loader-inner">
        <img src="css/spiffygif_64x64.gif">
      </div>
    </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body></html>

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
t1
function gifLoader() {
  var loader = $('.loader-outer'),
    img = loader.find('img');

  function gif() {}

  gif.prototype = {};
  gif.prep = function() {
    var h = $('body').height(),
      w = $('body').width(),
      liT, liL;
    liL = (w - 500) / 2;
    liT = (h - 500) / 2;
    $('.loader-inner').css({
      left: liL + 'px',
      top: liT + 'px'
    });
  };
  gif.show = function() {
    loader.fadeIn(100, function() {
      img.fadeIn(200);
    });
  };
  gif.hide = function() {
    loader.fadeOut(100, function() {
      img.fadeOut(200);
    });
  };
  if (arguments.length === 0) {
    return loader.is(':hidden') ? gif.show() : gif.hide();
  } else {
    return gif[arguments[0]]();
  }
}
pending…
t2
function gifLoader() {
  var loader = $('.loader-outer'),
    img = loader.find('img');
  loader.is(':hidden') ? loader.fadeIn(100, function() {
    img.fadeIn(200);
  }) : loader.fadeOut(100, function() {
    img.fadeOut(200);
  });
}
gifLoader.prototype = {};
gifLoader.prep = function() {
  var h = $('body').height(),
    w = $('body').width(),
    liT, liL;
  liL = (w - 500) / 2;
  liT = (h - 500) / 2;
  $('.loader-inner').css({
    left: liL + 'px',
    top: liT + 'px'
  });
};
gifLoader.show = function() {
  var loader = $('.loader-outer'),
    img = loader.find('img');
  loader.fadeIn(100, function() {
    img.fadeIn(200);
  });
};
gifLoader.hide = function() {
  var loader = $('.loader-outer'),
    img = loader.find('img');
  loader.fadeOut(100, function() {
    img.fadeOut(200);
  });
};
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