display:none VS class hidden VS $.hide() VS $.addClass('hidden') (jQuery 1.x) (v22)

Revision 22 of this benchmark created by Thomas Hunter II 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');

Teardown


    oP.className = ''; 
    oP.style.display = '';
    oP2.className = 'algo';

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
if(oP2.className.indexOf('hidden') < 0)
    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
classlist pop string check
if(oP2.className.indexOf('hidden') < 0)
    oP2.classList.add('hidden');
ready
classlist pop array check
if(oP2.classList.contains('hidden'))
    oP2.classList.add('hidden');
ready

Revisions

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