Benchmark: Set element class

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";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList
RegExp with DOM access
RegExp without DOM access
Array
String

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

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/OS: Chrome 99 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
classList	8524691.0 Ops/sec
RegExp with DOM access	2627102.0 Ops/sec
RegExp without DOM access	2902909.0 Ops/sec
Array	2733532.0 Ops/sec
String	3908764.0 Ops/sec

Set element class (version: 0)

Comparing performance of: classList vs RegExp with DOM access vs RegExp without DOM access vs Array vs String

Created: 2 years ago by: Guest

Jump to the latest result

classList

RegExp with DOM access

RegExp without DOM access

Array

String

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A