Run results for: className vs. getAttribute vs. classList sadsadasdsasadsadsas

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0

Browser: Firefox 85

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
className	2.0 Ops/sec
classList	42.2 Ops/sec

HTML Preparation code:

<div id="foo" class="c1 c2 c3"></div>

AخA
 
<div id="foo" class="c1 c2 c3"></div>

Tests:

className

var element = document.getElementById("foo");

for(var i = 0; i < 500; i++) {
	var z = element.className.split(' ');
    z.push(i);

	element.className = z.join(' ');
}

​x
 
var element = document.getElementById("foo");​for(var i = 0; i < 500; i++) {    var z = element.className.split(' ');    z.push(i);​    element.className = z.join(' ');}

classList

var element = document.getElementById("foo");

for(var i = 0; i < 500; i++) {
	element.classList.add(i);
}

 
var element = document.getElementById("foo");​for(var i = 0; i < 500; i++) {    element.classList.add(i);}