Run results for: Set element class

Run details:

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

Browser: Chrome 99

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
classList	8524691.0 Ops/sec
RegExp with DOM access	2627101.8 Ops/sec
RegExp without DOM access	2902908.5 Ops/sec
Array	2733531.5 Ops/sec
String	3908764.2 Ops/sec

HTML Preparation code:

<div id="test" class="abc def">Test.</div>

Script Preparation code:

var div = document.getElementById("test");

var cachedRegExp = new RegExp("\\s*\\bghi\\b\\s*");
var cachedClassNamesAsString = "abc def";
var cachedClassNamesAsArray = ["abc", "def"];

Tests:

classList
div.classList.toggle("ghi", true);
RegExp with DOM access
div.className = div.className.replace(cachedRegExp, "") + " ghi";
RegExp without DOM access
div.className = cachedClassNamesAsString.replace(cachedRegExp, "") + " ghi";
Array
div.className = [...cachedClassNamesAsArray, "ghi"].join(" ");
String
div.className = cachedClassNamesAsString + " ghi";

Run results for: Set element class

classList

RegExp with DOM access

RegExp without DOM access

Array

String