Run results for: className vs classList normalization

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

className

3K/s

classList with spread operator

696/s

classList with array from

588/s

View exact numbers

Test name	Executions per second
✓ className	3,317 Ops/sec
classList with spread operator	696 Ops/sec
classList with array from	588 Ops/sec

HTML Preparation code:

<div id="foo" class="bar test    space  OK"></div>

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

className
let element = document.getElementById("foo"); let i = 1000; while (i--) { let selector = "." + element.className.trim().replace(/\s+/g, '.'); }
classList with array from
let element = document.getElementById("foo"); let i = 1000; while (i--) { let selector = "." + Array.from(element.classList).join('.'); }
classList with spread operator
let element = document.getElementById("foo"); let i = 1000; while (i--) { let selector = "." + [...element.classList].join('.'); }