hide vs. display:none (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.hide { display: none }
</style>
<div id="myParentDiv">
<div id="myDiv">
  text text text mytext text text text
</div>
</div>

Setup

$("#myParentDiv").hide();

Test runner

Ready to run.

Testing in
TestOps/sec
jquery hide
$("#myDiv").hide();
$("#myDiv").show();
ready
display:none
$("#myDiv").css("display","none");
$("#myDiv").css("display","");
ready
getbyid
document.getElementById("myDiv").style.display = 'none';
document.getElementById("myDiv").style.display = '';
ready
duplicate show jquery
$("#myDiv").hide();
$("#myDiv").show();
$("#myDiv").show();
ready
duplicate hide jquery
$("#myDiv").hide();
$("#myDiv").hide();
$("#myDiv").show();
ready
display:none double
$("#myDiv").css("display","none");
$("#myDiv").css("display","none");
$("#myDiv").css("display","");
ready
getbyid double
document.getElementById("myDiv").style.display = 'none';
document.getElementById("myDiv").style.display = 'none';
document.getElementById("myDiv").style.display = '';
ready

Revisions

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