jQuery add Class vs hide and show functions

JavaScript performance comparison

Test case created

Info

Testing addClass() vs hide().

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
  #div_box { width: 50px; height: 50px; }
  .hide { display: none; }
</style>

<div id="div_box">HELLO</div

Preparation code output

HELLO

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Add CSS Class
$("#div_box").addClass("hide");
$("#div_box").removeClass("hide");
pending…
Use JQuery Function
$("#div_box").hide();
$("#div_box").show();
pending…

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

Compare results of other browsers

0 comments

Add a comment