className v.s. $.addClass vs tt.addClass (v14)

Revision 14 of this benchmark created by vralle on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul>
  <li class="1">
  </li>
  <li class="2">
  </li>
  <li class="3">
  </li>
  <li class="4">
  </li>
  <li class="5">
  </li>
  <li class="6">
  </li>
  <li class="7">
  </li>
  <li class="8">
  </li>
  <li class="9">
  </li>
  <li class="10">
  </li>
  <li class="11">
  </li>
  <li class="12">
  </li>
  <li class="13">
  </li>
  <li class="14">
  </li>
  <li class="15">
  </li>
  <li class="16" id="submit">
  </li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
$("li").addClass("btn btn-primary");
ready
JS (ID) + jQuery
var elements = document.getElementsByTagName("li");
$(elements).addClass("btn btn-primary");
ready
JS (ID) + jQuery + var
var elements = document.getElementsByTagName("li"),
        elClass = {};
elClass += "btn";
elClass += "btn-primary";
$(elements).addClass(elClass);
ready

Revisions

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