Vanilla Animation vs jQuery (v3)

Revision 3 of this benchmark created on

Description

Code Examples from Vanilla-js.com

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="thing" style="height:10px;width:10px;background-color:red">
</div>

Setup

var s = document.getElementById('thing').style;
    s.display = "block";
    s.opacity = 1;

Test runner

Ready to run.

Testing in
TestOps/sec
Vanilla JS
// async test
var s = document.getElementById('thing').style;
var opacity = 1;
(function fade() {
  s.opacity = ( opacity -= .1 );
  opacity < 0 ? s.display = "none" && deferred.resolve() : setTimeout(fade, 40)
})();
ready
jQuery
// async test
$('#thing').fadeOut(400, function() { deferred.resolve(); });
ready

Revisions

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