Vanilla JS V Jquery Hide (v11)

Revision 11 of this benchmark created by Michael S. Mikowski on

Description

The original poster declared that jQuery sucks by not testing the same thing. The show() and hide() methods are much more sophisticated than setting the CSS display property. The provide for callbacks, fades, chaining, and all sorts of capabilities. Let's try to get a little closer to an Apples-to-Apples comparison, shall we?

Yes, jQuery is slower, but not by the huge margin the obviously biased or naive or disingenuous original author. On my local workstation, jQuery is around 25% as fast as native, showing 224,870 versus 973,709 ops/s for the best native showing. Even that is not a true apples to apples comparison, however, because jQuery provides for batching of CSS parameters and provides for callbacks after the DOM has updated - a non-trivial capability that is not easily obtained cross-browser using native JS.

Preparation HTML

<div id="Stupid_Div">
  Stupid Crap
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var
      $div = $('#Stupid_Div'),
      none_map  = { display: 'none' },
      block_map = { display: 'block' }
      ;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery CSS props
$div.css(none_map).css(block_map).css(none_map);
ready
Vanilla JS
document.getElementById("Stupid_Div").style.display = "none";
document.getElementById("Stupid_Div").style.display = "block";
document.getElementById("Stupid_Div").style.display = "none";
ready
Vanilla JS Retarded Suggestion
var hide = "none"; //this var isnt needed
var show = "block"; //this var isnt needed
document.getElementById("Stupid_Div").style.display = hide;
document.getElementById("Stupid_Div").style.display = show;
document.getElementById("Stupid_Div").style.display = hide;
ready
Vanilla JS Cache-Everything Option
var hide = "none",
  show = "block",
  elem = document.getElementById("Stupid_Div");
elem.style.display = hide;
elem.style.display = show;
elem.style.display = hide;
ready
jQuery retarded comparison
$('#Stupid_Div').hide().show().hide();
ready

Revisions

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