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

Revision 12 of this benchmark created by vralle on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://raw.github.com/dameleon/tt.js/develop/tt.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>

Setup

var jsId = document.getElementById("submit");
    var $Id = $("#submit");
    var ttId = $("#submit");
    ttId.removeClass("class");
    var jsTags = document.getElementsByTagName("li"), count = jsTags.length;
    var $Tags = $("li");
    var ttTags = $("li");
    ttTags.removeClass("class");

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery (ID)
$Id.addClass("class");
ready
tt(ID)
ttId.addClass("class");
ready
JS (ID)
jsId.className += " class";
ready
JS (ID) HTML5
jsId.classList.add('class');
ready
jQuery (tagName)
$Tags.addClass("class");
ready
tt (tagName)
ttTags.addClass("class");
ready
js (tagName) HTML5
for(var i = 0; i < count; i++) {
        jsTags[i].classList.add('class');
}
ready
JS (ID) MF
var c = function(e,v,n,c,r){r=e[c='className'].replace(eval('/ *\\b'+n+'\\b/g'),'');return'has'==v?r!=e[c]:e[c]={add:1,toggle:r==e[c]}[v]?r+' '+n:r},
target = document.getElementById("submit"),
$target = $(target),
cl;
(cl = target.classList) && cl.add("class");
ready
JS (ID) obj
var getItems = {
      elems:{
          el:document.getElementById("submit")
      }
  }, item = getItems.elems.el;
item.className += " class";
ready

Revisions

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