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

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

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests different ways to add the class "ghi" to an HTML element with the id "test".

Here's a breakdown of each approach:

**1. `classList.toggle("ghi", true)`:** This uses the native `classList` API, which is designed for managing classes on elements. It's generally considered the most modern and efficient way to handle this task. 
    * **Pros:**  Clean, concise, built-in, performs well in browsers.
    * **Cons:** Requires a relatively recent browser implementation of the `classList` API.

**2. `div.className = div.className.replace(cachedRegExp, "") + " ghi";`**: This uses a regular expression (`cachedRegExp`) to remove any existing whitespace around the class names and then appends "ghi".
    * **Pros:**  Older browsers might support this if they don't have `classList`.
    * **Cons:** More verbose, potential for performance issues depending on the complexity of the regular expression.

**3. `div.className = cachedClassNamesAsString.replace(cachedRegExp, "") + " ghi";`**: Similar to option 2 but uses a string manipulation instead of accessing the DOM each time.
    * **Pros:** Avoids repeated DOM access.
    * **Cons:** Still relies on string manipulation which can be less performant than `classList`.

**4.  `div.className = [...cachedClassNamesAsArray, "ghi"].join(" ");`**: This approach uses the array method `join()` to concatenate the class names into a string.
    * **Pros:** More readable and potentially faster than string manipulation methods.
    * **Cons:** Still involves manipulating strings.

**5.  `div.className = cachedClassNamesAsString + " ghi";`**: The simplest approach, just concatenating the existing class names with "ghi". 
    * **Pros:** Very simple.
    * **Cons:** Less efficient, especially for large class lists.

**Other Alternatives:**

* **Set `classList` property directly:** Some frameworks (e.g., React) allow you to set the `className` attribute directly on the component, which might handle these operations internally in a more optimized way.

**Key Considerations:**

- **Browser Support:**  Prioritize using `classList` whenever possible as it's widely supported and performs well.
- **Performance:** String manipulation can be expensive, especially for large class lists. Consider using `classList` or arrays for better performance.
- **Readability:** Aim for clear and concise code that is easy to understand and maintain.

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 gemma2:9b, generated 2 months ago):