Benchmark: setAttribute(...) vs. classList.add(...) vs classList.value vs className

HTML Preparation code:

<div id="foo"></div>

Tests:

setAttribute(...)
var element = document.getElementById("foo"); var i = 100; while (i--) { element.setAttribute("class", "bar"); }
classList.add(...)
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.add("bar"); }
classList.value
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.value = "bar"; }
ClassName
var element = document.getElementById("foo"); var i = 100; while (i--) { element.className = "bar"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute(...)
classList.add(...)
classList.value
ClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute(...)	108444.5 Ops/sec
classList.add(...)	53317.8 Ops/sec
classList.value	160853.6 Ops/sec
ClassName	220848.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to set class names on an HTML element is a useful benchmark.

**Benchmark Overview**

The provided JSON defines four test cases:

1. `setAttribute(...)`: Sets the class name using the `setAttribute` method.
2. `classList.add(...)`: Adds a class name to the element's class list using the `classList.add` method.
3. `classList.value`: Sets the value of the class list property using the `classList.value` syntax.
4. `className`: Sets the class name directly on the element's `className` property.

**Options Comparison**

The four approaches have different pros and cons:

*   **`setAttribute(...)`**: This method is straightforward but may not be as efficient as other methods since it involves setting a DOM property, which can lead to additional overhead.
    *   Pros: Simple to implement, widely supported.
    *   Cons: May incur unnecessary overhead due to DOM property access.
*   `classList.add(...)`: This method adds a class name to the element's class list and is generally considered more efficient than setting individual properties. It also provides a way to dynamically add classes without having to manually manage the class names in your code.
    *   Pros: Efficient, allows for dynamic class addition, widely supported.
    *   Cons: May require additional library support (e.g., `classList` method), slightly less readable syntax than other methods.
*   `classList.value`: This approach sets the value of the class list property and is similar to using a string of class names separated by spaces. It's relatively efficient but might not be as readable as other methods since it uses a non-standard syntax.
    *   Pros: Efficient, allows for dynamic class addition, concise syntax.
    *   Cons: Non-standard syntax, requires library support (e.g., `classList` method).
*   `className`: This approach sets the class name directly on the element's `className` property and is relatively simple to implement. However, it may not be as efficient as other methods since it involves setting a DOM property.
    *   Pros: Simple to implement, widely supported.
    *   Cons: May incur unnecessary overhead due to DOM property access.

**Library Considerations**

Two libraries are used in the benchmark:

*   `classList`: This is a part of the HTML5 specification and allows for dynamic class addition and removal. It's included in most modern browsers.
    *   Purpose: Provides an efficient way to add and remove classes from an element.
*   No other library is mentioned.

**Special JS Features or Syntax**

The benchmark uses two special features:

*   `classList`: This feature is part of the HTML5 specification and allows for dynamic class addition and removal. It's included in most modern browsers.
    *   Purpose: Provides an efficient way to add and remove classes from an element.

Overall, the benchmark highlights the relative efficiency of different approaches to set class names on an HTML element. The `classList.add` method is generally considered the most efficient approach due to its concise syntax and ability to dynamically add classes.

**Alternative Approaches**

Other alternative approaches to setting class names include:

*   Using a CSS class selector: This involves adding a CSS class to the element's style attribute instead of setting a DOM property.
    *   Pros: Can be more efficient than setting a DOM property, allows for easier styling and layout management.
    *   Cons: Requires CSS knowledge, may not work in all situations (e.g., when using JavaScript to dynamically set classes).
*   Using a library like jQuery: This involves using the jQuery `addClassClass` method to add classes to an element.
    *   Pros: Simplifies class addition and removal, widely supported.
    *   Cons: Requires jQuery library support, may incur additional overhead due to its complexity.

Related benchmarks:

setAttribute(...) vs. classList.add(...) vs classList.value vs className (version: 0)

Comparing performance of: setAttribute(...) vs classList.add(...) vs classList.value vs ClassName

Created: 3 years ago by: Guest

Jump to the latest result

setAttribute(...)

classList.add(...)

classList.value

ClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):