display:none VS class hidden VS $.hide() VS $.addClass('hidden') (jQuery 1.5.2) (v17)

Revision 17 of this benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.hidden { display:none; }
</style>
<p id="p">Algo</p>
<p id="p2" class="algo">Algo con class</p>

Setup

var oP = document.getElementById('p');
    var oP2 = document.getElementById('p2');
    var $oP = $('#p');
    var $oP2 = $('#p2');

Test runner

Ready to run.

Testing in
TestOps/sec
Display:none
oP.style.display = 'none';
ready
Class Hidden
oP.className = 'hidden';
ready
Class Hidden + other class
oP2.className = +' hidden';
ready
$.hide()
$('#p').hide()
ready
$.addClass('hidden')
$('#p2').addClass('hidden')
ready
$.css('display','none')
$('#p').css('display', 'none')
ready
$(foo).css('display','none')
$(oP).css('display', 'none')
ready
$(foo).hide()
$(oP).hide()
ready
$(foo).addClass('hidden')
$(oP2).addClass('hidden')
ready
classlist
oP.classList.add('hidden');
ready
hidden attr
oP.hidden = true
ready

Revisions

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