Run results for: setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override)

Same as https://www.measurethat.net/Benchmarks/Show/27015/0/setattribute-vs-classlistadd-vs-classlistvalue-vs-class but without override, getter chosen based on https://www.measurethat.net/Benchmarks/Show/27014/0/getattribute-vs-classlistvalue-vs-classname

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Browser: Chrome 149

Operating system: Linux

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
✓ classList.add	24,112 Ops/sec
classList.value	11 Ops/sec
setAttribute(...)	11 Ops/sec
className	5 Ops/sec

Test name

Executions per second

✓ classList.add

24,112 Ops/sec

classList.value

11 Ops/sec

setAttribute(...)

11 Ops/sec

className

5 Ops/sec

Tests:

setAttribute(...)
var element = document.getElementById("foo"); var i = 100; while (i--) { element.setAttribute("class", element.className + " bar baz qwe"); }
classList.add
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.add("bar", "baz", "qwe"); }
classList.value
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.value = element.className + " bar baz qwe"; }
className
var element = document.getElementById("foo"); var i = 100; while (i--) { element.className = element.className + " bar baz qwe"; }