jQuery addClass vs dom classList (v23)

Revision 23 of this benchmark created on

Description

Added a .className reset to each test so that we're actually testing the addition of the classes.

Also cached the DOM selection/jQuery object creation to reduce the test down to what is actually being tested.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<div id="testDiv"></div>

  <style>
    .class1{ color: red }
  </style>
<script>

var $z = Zepto;
var $ = jQuery;

var elem = document.getElementById("testDiv");
var jqElem = $(elem);
var zElem = $z(elem);

var supportClassList = !!elem.classList;

function addClassF(el,cls){

    var clss;
    if (typeof cls === "string" ) {
       clss = cls.split(" ");
    }
    else /*if ( cls instanceof Array )*/ {
       clss = cls;
    }
    var i, len = clss.length;
    for(i = 0; i < len ; i+=1 ) el.classList.add(clss[i]);
}

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery addClass
jqElem.addClass("class1 class2");

elem.className = "";
ready
DOM classList
elem.classList.add("class1");
elem.classList.add("class2");

elem.className = "";
ready
Zepto addClass
zElem.addClass('class1 class2');

elem.className = "";
ready
DOM classList with wrapper
addClassF(elem,["class1","class2"]);

elem.className = "";
ready
native
elem.className += ' class1 class2';

elem.className = "";
ready
DOM classList variadic (newest impls)
elem.classList.add("class1", "class2");

elem.className = "";
ready

Revisions

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