jQuery show/hide vs css("display","none/block") (v6)

Revision 6 of this benchmark created by WebGyver on

Description

Adding a test to see how adding and removing CSS styles would compare against the other tests. This might be redundant, but I have some not so techno co-workers who want me to create classes to show & hide stuff, and then use jQuery to addClass(x) and removeClass(x). This is more of a sanity check for me than anything else.

Friday, February 8, 2013| 11:45 AM

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="remove">
</div>
<div id="remove2">
</div>
<div id="remove3">
</div>
<script>
  $elem = $("#remove");
  $elem2 = $("#remove2");
  $elem3 = $("#remove3");

  function showElement(element) {
    element[0].style.display = "block";
  }

  function hideElement(element) {
    element[0].style.display = "none";
  }

  function showElements(elementsArray) {
    for (var el in elementsArray) {
       elementsArray[el][0].style.display = "block";
    }
  }

  function hideElements(elementsArray) {
    for (var el in elementsArray) {
        elementsArray[el][0].style.display = "none";
    }
  }

  function showElements2(elementsArray) {
    $.each(elementsArray, function() {
       $(this)[0].style.display = "block";
    });
  }

  function hideElements2(elementsArray) {
    $.each(elementsArray, function() {
        $(this)[0].style.display = "none";
    });
  }


  function showWithHelp(elements, isArray){
    isArray = isArray || false;
    if (isArray) for (var i in elements) elements[i][0].style.display = 'block';
    else elements[0].style.display = 'block';
  }

  function hideWithHelp(elements, isArray){
    isArray = isArray || false;
    if (isArray) for (var i in elements) elements[i][0].style.display = 'none';
    else elements[0].style.display = 'none';
  }


  function showClass(element) {
    element[0].addClass('hideEl');
  }

  function hideClass(element) {
    element[0].removeClass('hideEl');
  }

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
show/hide
$elem.show();
$elem.hide();
$elem2.show();
$elem2.hide();
$elem3.show();
$elem3.hide();
ready
jquery css
$elem.css("display", "block");
$elem.css("display", "none");
$elem2.css("display", "block");
$elem2.css("display", "none");
$elem3.css("display", "block");
$elem3.css("display", "none");
ready
css 1
$elem[0].style.display = "block"
$elem[0].style.display = "none";
$elem2[0].style.display = "block"
$elem2[0].style.display = "none";
$elem3[0].style.display = "block"
$elem3[0].style.display = "none";
ready
function
showElement($elem);
hideElement($elem);
showElement($elem2);
hideElement($elem2);
showElement($elem3);
hideElement($elem3);
ready
css 2
$elem.get(0).style.display = "block"
$elem.get(0).style.display = "none";
$elem2.get(0).style.display = "block"
$elem2.get(0).style.display = "none";
$elem3.get(0).style.display = "block"
$elem3.get(0).style.display = "none";
ready
jquery css {}
$elem.css({"display": "block"});
$elem.css({"display": "none"});
$elem2.css({"display": "block"});
$elem2.css({"display": "none"});
$elem3.css({"display": "block"});
$elem3.css({"display": "none"});
ready
fn $-array 1
showElements([$elem,$elem2,$elem3]);
hideElements([$elem,$elem2,$elem3]);
ready
fn $-array 2
showElements2([$elem,$elem2,$elem3]);
hideElements2([$elem,$elem2,$elem3]);
ready
fn with help (single)
showWithHelp($elem);
showWithHelp($elem2);
showWithHelp($elem3);
hideWithHelp($elem);
hideWithHelp($elem2);
hideWithHelp($elem3);
ready
fn with help (array)
showWithHelp([$elem,$elem2,$elem3], true);
hideWithHelp([$elem,$elem2,$elem3], true);
ready
add remove class
showClass($elem);
hideClass($elem);
showClass($elem2);
hideClass($elem2);
showClass($elem3);
hideClass($elem3);
ready

Revisions

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