jQuery versus className

JavaScript performance comparison

Test case created by JC Fant

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>



<div class="wrapper">
     <div class="innerWrapper">
          <div id="getMe" class="button">
               <a href="javascript:void(0)" id="button" class="buttonRef">
                    <span class="buttonText">Text</span>
               </a>
          </div>
     </div>
</div>
<script>
  var jElem = $("#getMe");
  var dElem = document.getElementById("getMe");
</script>
    

Preparation code output

<div class="wrapper"> <div class="innerWrapper"> <div id="getMe" class="button"> <a href="javascript:void(0)" id="button" class="buttonRef"> <span class="buttonText">Text</span> </a> </div> </div> </div> <script> var jElem = $("#getMe"); var dElem = document.getElementById("getMe"); </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
1. jQuery - get Element + get Class
$("#getMe").attr('class');
pending…
2. GET DOM ELEM + get Class
document.getElementById("getMe").className;
pending…
3. jQuery get Class
jElem.attr('class');
pending…
4. DOM get class
dElem.className;
pending…

Compare results of other browsers

Revisions

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

0 Comments