jQuery-Animate-Enhanced

JavaScript performance comparison

Revision 4 of this test case created

Info

Performance comparison for: http://playground.benbarnett.net/jquery-animate-enhanced/

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://raw.github.com/benbarnett/jQuery-Animate-Enhanced/master/scripts/src/jquery.animate-enhanced.js">
</script>
<div id="animateme">
  Animate Me!
</div>
<script>
  $('#animateme').width(200);
</script>
<script>
Benchmark.prototype.setup = function() {
    $('#animateme').clone().attr('id', 'animateClone').addClass('animateme').insertAfter('#animateme')
};

Benchmark.prototype.teardown = function() {
    $('#animateClone').remove()
};
</script>

Preparation code output

Animate Me!

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
enhanced 2d
$('#animateClone').animate({
  left: '+=200px',
  width: 300
}, 500);
pending…
enhanced 3d
$('#animateClone').animate({
  left: '+=200px',
  width: 300,
  useTranslate3d: true
}, 500);
pending…
normal
$('#animateClone').animate({
  left: '+=200px',
  width: 300,
  avoidTransforms: true
}, 500);
pending…
enhanced 2d leaveTransforms
$('#animateClone').animate({
  left: '+=200px',
  width: 300,
  leaveTransforms: true
}, 500);
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:

2 comments

Ben commented :

Can someone explain to a newb why IE appears to be seriously rocking this graph? I thought Chrome's JS engine was the smoking-est?

Barney commented :

This is completely unexpected. By all indicators, 'enhanced' performance is /worse/ on everything except IE9 – the browser which doesn't support any of the features at play.

Add a comment