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

Revision 2 of this benchmark created by dotherightthing on

Preparation HTML

<script src="https://code.jquery.com/jquery-1.5.2.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');

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

Revisions

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