Benchmark: className vs classList vs style

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className += (" bar" + i); }
classList
var element = document.getElementById("foo"); var i = 1000; var cl = element.classList; while (i--) { cl.add("bar" + i); }
style
var element = document.getElementById("foo"); var i = 1000; var style = element.style; while (i--) { style.width = i + "px" }

Rendered benchmark preparation results:

Previous results

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Mac OS X 10.15.7

Related benchmarks:

className vs classList vs style (version: 1)