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

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark tests and explain what's being tested.

**Benchmark Definition**

The test case is measuring the performance of setting an element's class using different approaches.

**Test Cases**

There are five test cases:

1. **classList**: Using `div.classList.toggle("ghi", true);` to add or remove a class from the element.
2. **RegExp with DOM access**: Using `div.className = div.className.replace(cachedRegExp, "") + " ghi";` to remove a class and add a new one using a regular expression ( RegExp ) and accessing the DOM.
3. **RegExp without DOM access**: Similar to test case 2, but only removing a class using a RegExp without accessing the DOM.
4. **Array**: Using `div.className = [...cachedClassNamesAsArray, "ghi"].join(" ");` to add a new class to the element by creating an array of classes and joining them with a space.
5. **String**: Simply concatenating the existing class names with a new one using `div.className = cachedClassNamesAsString + " ghi";`.

**Options Compared**

The test cases are comparing different methods for setting an element's class:

* Using the `classList` API (`toggle()` method)
* Using a RegExp to remove and add classes
* Creating an array of classes and joining them with a space
* Simply concatenating strings

**Pros and Cons**

Here are some pros and cons of each approach:

* **classList**: Pros: concise, easy to read; Cons: may not be supported in older browsers.
* **RegExp**: Pros: powerful for complex class management; Cons: can be slower due to DOM access.
* **Array**: Pros: flexible, easy to add/remove classes; Cons: may create unnecessary DOM updates.
* **String**: Pros: simple, easy to implement; Cons: may lead to incorrect or inefficient class management.

**Other Considerations**

When choosing an approach, consider the following:

* Performance: If performance is critical, use `classList` or Array-based approaches.
* Complexity: If you need to manage complex class logic, use a RegExp.
* Browser support: Ensure the chosen approach is supported in your target browsers.

**Library and Special JS Features**

No libraries are used in these test cases. However, if you're interested in learning more about JavaScript features like `classList`, RegExp, or array methods (e.g., `join()`, `[...array, "newClass"].join(" ")`), I'd be happy to explain them in more detail!

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	2627101.8 Ops/sec
RegExp without DOM access	2902908.5 Ops/sec
Array	2733531.5 Ops/sec
String	3908764.2 Ops/sec

Related benchmarks:

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

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):