jQuery addClass vs dom classList (v15)

Revision 15 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<div id="testDiv"></div>
  <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]);
    }

Teardown


    document.getElementById("testDiv").className = '';

Test runner

Ready to run.

Testing in
TestOps/sec
jquery addClass
$("#testDiv").addClass("class1 class2");
document.getElementById("testDiv").className = '';
ready
DOM classList
(function() {
   var e = document.getElementById("testDiv");
   e.classList.add("class1");
   e.classList.add("class2");
})();
document.getElementById("testDiv").className = '';
ready
Zepto addClass
z('#testDiv').addClass('class1 class2');
document.getElementById("testDiv").className = '';
ready
DOM classList with wrapper
addClassF(document.getElementById("testDiv"),["class1","class2"]);
document.getElementById("testDiv").className = '';
ready
DOM classList (no ready)
var e = document.getElementById("testDiv");
e.classList.add("class1");
e.classList.add("class2");
document.getElementById("testDiv").className = '';
ready
DOM classList multiple
document.getElementById("testDiv").classList.add("class1", "class2");
document.getElementById("testDiv").className = '';
ready
Native (no classList)
document.getElementById("testDiv").className += ' class1 class2';
document.getElementById("testDiv").className = '';
ready
Native
var class1 = document.getElementById("testDiv").className;
var class2 = class1 + " class1 class2";

document.getElementById("testDiv").className = class2;
document.getElementById("testDiv").className = '';
ready
Clear Class Name
document.getElementById("testDiv").className = '';
ready

Revisions

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