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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model gemma2:9b, generated one year 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: 4 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>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):