jQuery addClass vs dom classList (v30)

Revision 30 of this benchmark created by Victor Osório on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/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';
    
    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
$("#testDiv").addClass("class1 class2");
ready
DOM classList
   var e = document.getElementById("testDiv");
   e.classList.add("class1");
   e.classList.add("class2");
ready
Zepto addClass
z('#testDiv').addClass('class1 class2');
ready
DOM classList with wrapper
addClassF(document.getElementById("testDiv"), ["class1", "class2"]);
ready

Revisions

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