className and classList

In JavaScript, there are two main ways to add and remove classes dynamically to a DOM element. The one is via the property className which returns a string and the other via the property classList, which returns a DOMTokenList object with some useful methods. Working with classes to which we have attached different CSS styles is important for every website, especially when they have to be changed in response to some user action. This is used in far too many websites to justify further exploration. I wondered which method would be better to use and decided to test my assumptions with one vertical test, in which a single class is added to a single element and subsequently deleted from it, which is repeated many times and one horizontal test, in which many classes are added to a single element and then subsequently deleted from it.

Here is the code I used for the vertical test:

combined execution time of all methods for multiple classes on a single element

I used the number 1 for className related functions and number 2 for classList related functions. I profiled each method 10 times with Firebug and took the average of the results. Here are the averages:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44var test = document.getElementById('test');
var cls = 'class';
var iterations = 10000;

function add_class1(elem,cls) {
    elem.className += ((elem.className == '') ? '':' ') + cls;
}

function add_class2(elem,cls) {
    elem.classList.add(cls);
}

function remove_class1(elem,cls) {
    var classes = elem.className.split(' ');
    var len = classes.length;
    if(len > 0) {
        for ( var i = 0; i < len; i++ ) {
            if(classes[i] == cls) {
                classes.splice(i,1);
            }
        }
    }
    elem.className = classes.join(' ');
}

function remove_class2(elem,cls) {
    elem.classList.remove(cls);
}

function combined_add_remove1() {
    add_class1(test,cls);
    remove_class1(test,cls);
}

function combined_add_remove2() {
    add_class2(test,cls);
    remove_class2(test,cls);
}

console.log('Combined execution');
for ( var i = 0; i < iterations; i++ ) {
    combined_add_remove1();
    combined_add_remove2();
}

When it comes to adding a single class to a single element, className seems to be a bit faster than classList here, but when it comes to removing classes className is slower as we have to split the string in parts and remove the ones we don't need. This is why classList can offset the initial disadvantage here. When we add the times for every method, we see the following:

add and remove methods to alter a single class on a single element

This shows that the difference between the two methods on a single element is insignificant.

In the horizontal test, when we add many classes to a single element, we have the following result:

 combined execution time of all methods to alter a single class on a single element

classList is better the more classes we need to add. But in practice, we rarely have more than a couple attached to an element. If this isn't the case, we are probably doing something wrong. The number of classes we use should be minimal. In case of only a few classes, the differences won't be very visible. Here is the combined time for the two methods:

 add and remove methods for multiple classes on a single element

The difference here is 7.1% and again it can be seen only when the number of classes is large. Overall, classList performs a bit better, but its main advantage are the methods that it offers, which make working with classes much more convenient. Finding the time to apply them right is well worth the effort.

bit.ly/13XG00y