hide vs. display:none (v5)

Revision 5 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
$("#myDiv").hide();
$("#myDiv").show();
$("#myDiv").show();
ready
duplicate hide
$("#myDiv").hide();
$("#myDiv").hide();
$("#myDiv").show();
ready
class hide double
$('#myDiv').toggleClass('hide', true)
$('#myDiv').toggleClass('hide', true)
$('#myDiv').toggleClass('hide', false)
ready
class hide
$('#myDiv').toggleClass('hide', true)
$('#myDiv').toggleClass('hide', false)
ready
mixed
$(document.getElementById('myDiv')).hide();
$(document.getElementById('myDiv')).show();
ready

Revisions

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