jQuery addClass vs dom classList (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="http://zeptojs.com/zepto.min.js">
</script>
<div id="testDiv">
  <style>
    .class1{ color: red }
  </style>

Setup

z = Zepto;
    
    // addClass (classList detection with jQuery fallback)
    var supportClassList = typeof document.documentElement.classList !== 'undefined';
    
    var testDiv = document.getElementById("testDiv");
    var testDivJquery = $(testDiv);
    
    function addClassF(el, cls) {
      var clss;
      if (typeof cls === "string") {
        clss = cls.split(" ");
      } else if (cls instanceof Array) {
        clss = cls;
      }
      var i = 0,
          len = clss.length;
      for (; i < len; i++)
      el.classList.add(clss[i]);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jquery addClass
testDivJquery.addClass("class1");
ready
DOM classList add
testDivJquery[0].classList.add("class1");
ready
Zepto addClass
z('#testDiv').addClass('class1 class2');
ready
DOM classList with wrapper
addClassF(document.getElementById("testDiv"), ["class1", "class2"]);
ready
jquery removeClass
testDivJquery.removeClass("class1");
ready
DOM classList remove
testDivJquery[0].classList.remove("class1");
ready

Revisions

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