jQuery addClass vs dom classList (v31)

Revision 31 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>

Setup

z = Zepto;
    
    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 = 0, len = clss.length;
        for(; i < len ; i++ )
           el.classList.add(clss[i]);
    }

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
setAttribute
elem.setAttribute('class', 'class1')
elem.setAttribute('class', '')
ready

Revisions

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