jQuery show/hide vs css("display","none/block") (v37)

Revision 37 of this benchmark created by Wookash on

Description

Added hidden attribute test.

Preparation HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js">
</script>
<div id="remove">
</div>
<script>
  $elem = $("#remove");

  function showElement(element) {
    element[0].style.display = "block";
  }

  function hideElement(element) {
    element[0].style.display = "none";
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
show/hide
$elem.show();
$elem.hide();
ready
jquery css
$elem.css("display", "block");
$elem.css("display", "none");
ready
css 1
$elem[0].style.display = "block"
$elem[0].style.display = "none";
ready
function
showElement($elem);
hideElement($elem);
ready
css 2
$elem.get(0).style.display = "block"
$elem.get(0).style.display = "none";
ready
jquery css {}
$elem.css({
  "display": "block"
});
$elem.css({
  "display": "none"
});
ready
hidden attribute
$elem[0].hidden = false;
$elem[0].hidden = true;
ready

Revisions

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