jQuery addClass vs dom classList (v33)

Revision 33 of this benchmark created on

Description

This is a fairly extensive test now but it does have some faults: - this makes an assumption that you're caching your jQuery/Zepto objects, if you're simply using the selector engine you'll get an 80% slowdown - these numbers aren't including optimizations that V8/etc. can make to functions since these are created each test

Preparation HTML

<script src="https://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" class="class3">
  <style>
    .class1{ color: red }
  </style>

Setup

z = Zepto;
    cachedZ = z('#testDiv');
    cached$ = $('#testDiv');
    cachedEl = cached$[0];
    
    // addClass (classList detection with jQuery fallback)
    var supportClassList = typeof document.documentElement.classList !== 'undefined';
    
    function addClassF(el,cls) {
        var clss, classList, i, l;
        if (typeof cls === 'string') {
            clss = cls.split(/\s+/);
        } else if (cls instanceof Array) {
            clss = cls;
        }
    
        classList = el.classList
        for (i = 0, l = clss.length; i < l; i++) {
            classList.add(clss[i]);
        }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
jquery addClass
cached$.addClass('class1 class2 class3');
ready
DOM classList
var newClasses = 'class1 class2 class3',
    classNames = newClasses.split(/\s+/),
    classList = cachedEl.classList,
    i, l;

for (i = 0, l = classNames.length; i < l; i++) {
    classList.add(classNames[i]);
}
ready
DOM classList with check
var newClasses = 'class1 class2 class3',
    classNames = newClasses.split(/\s+/),
    classList = cachedEl.classList,
    i, l;

for (i = 0, l = classNames.length; i < l; i++) {
    if (!classList.contains(classNames[i])) {
        classList.add(classNames[i]);
    }
}
ready
DOM classList with className check
var newClasses = 'class1 class2 class3',
    classNames = newClasses.split(/\s+/),
    classList = cachedEl.classList,
    curClassName = cachedEl.className,
    i, l;

for (i = 0, l = classNames.length; i < l; i++) {
    if (curClassName.indexOf(classNames[i]) === -1) {
        classList.add(classNames[i]);
    }
}
ready
DOM classList multiple
cachedEl.classList.add("class1", "class2", "class3");
ready
Zepto addClass
cachedZ.addClass('class1 class2 class3');
ready

Revisions

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