Run results for: Comparison of replacing a class with className, classList.replace and setAttribute

Run details:

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

Browser: Chrome 131

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Element.classList

15K/s

Element.setAttribute

14K/s

Element.className

10K/s

View exact numbers

HTML Preparation code:

<div id="test" class="no-js">

Tests:

Element.className
const element = document.getElementById("test"); let i = 1000; while (i--) { element.className = element.className.replace(/\bno-js\b/, 'js'); }
Element.classList
const element = document.getElementById("test"); let i = 1000; while (i--) { element.classList.replace('no-js', 'js'); }
Element.setAttribute
const element = document.getElementById("test"); let i = 1000; while (i--) { element.setAttribute('class', 'js'); }