jQuery addClass vs dom classList (v35)

Revision 35 of this benchmark created by Cristian 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
(function() {
   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
className
document.getElementById("testDiv").className = ["class1", "class2"].join(" ");
ready

Revisions

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