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

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute(...)	2505.0 Ops/sec
classList.add(...)	2893.3 Ops/sec
classList.value	4322.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is tested?**

The provided JSON represents a benchmark test that compares three different approaches to set or modify the `class` attribute of an HTML element: `setAttribute()`, `classList.add()` (with `classList.value`), and `classList.value`.

**Options being compared:**

1. **setAttribute():** This method sets or modifies the value of a named attribute associated with an element.
2. **classList.add():** This method adds one or more elements to the class list of an element, which is a way to associate classes with an element.
3. **classList.value:** This property returns the value of the `class` attribute as a string.

**Pros and Cons:**

1. **setAttribute()**:
	* Pros:
		+ Fast, as it directly sets or modifies the attribute.
		+ Works well for simple cases where only one class needs to be set.
	* Cons:
		+ Can lead to slower performance if multiple classes need to be added or removed.
		+ May not work correctly in all scenarios (e.g., when using `setAttribute()` with a class name that starts with a dash).
2. **classList.add():**
	* Pros:
		+ Efficient for adding multiple classes, as it uses a single operation.
		+ Works well for scenarios where multiple classes need to be added or removed.
	* Cons:
		+ May be slower than `setAttribute()` for simple cases with only one class set.
		+ Can lead to increased memory usage due to the creation of a new class list object.
3. **classList.value:**
	* Pros:
		+ Provides a convenient way to get or set the value of the `class` attribute as a string.
	* Cons:
		+ Slower than `setAttribute()` and `classList.add()`, as it involves getting or setting the property on an element object.
		+ May not be optimized for performance, especially in older browsers.

**Library usage:**

None of the options mentioned rely on specific libraries. However, it's worth noting that some JavaScript implementations (like V8) might have additional optimizations or quirks when working with `classList` properties.

**Special JS features:**

There are no special JS features used in this benchmark, making it accessible to a wide range of developers.

**Alternatives:**

Other alternatives for setting or modifying the `class` attribute include:

1. **style.display:** Set the `display` property to one of the following values: `block`, `inline-block`, `inline`, etc.
2. **style.cssText:** Set the CSS text content of an element's style attribute.

Keep in mind that these alternatives might have different performance implications, depending on the specific use case and browser implementation.

That's a brief overview of the benchmark test!

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

setAttribute(...)

classList.add(...)

classList.value

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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