jQuery versus className

Benchmark created by JC Fant on

Description

A quick test to see the performance based on using jQuery's .attr('class') versus the native className;

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
1. jQuery - get Element + get Class
$("#getMe").attr('class');
ready
2. GET DOM ELEM + get Class
document.getElementById("getMe").className;
ready
3. jQuery get Class
jElem.attr('class');
ready
4. DOM get class
dElem.className;
ready

Revisions

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