Run results for: className vs. setAttribute vs. classList (separately and in one go)

Run details:

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

Browser: Chrome 127

Operating system: Windows

Device Platform: Desktop

Date tested: 3 months ago

HTML Preparation code:

<div id="foo"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; element.className = "ding"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); element.setAttribute("class", "ding"); }
classList add separately
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.add("ding"); }
classList add once
var element = document.getElementById("foo"); var i = 1000; var classList = []; while (i--) { classList.push["bar"]; classList.push["ding"]; element.classList.add(...classList); }