Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark defines three test cases:

1. `className`: This test case checks how long it takes to add a class name to an element using the `className` property.
2. `setAttribute`: This test case checks how long it takes to set an attribute on an element with the value "class" and the value "bar".
3. `classList`: This test case checks how long it takes to add an element to the class list of an element.

**Options compared**

The benchmark is comparing three different approaches:

1. **className**: Using the `className` property to add a class name.
2. **setAttribute**: Using the `setAttribute` method to set an attribute on the element.
3. **classList**: Using the `classList` API to add an element to the class list.

**Pros and Cons of each approach**

Here's a brief overview of the pros and cons of each approach:

* **className**:
	+ Pros: Simple, straightforward, and widely supported.
	+ Cons: Can be slower due to the way browsers handle class names. Some older browsers may not support this method at all.
* **setAttribute**:
	+ Pros: More control over attribute values and can be used for other purposes beyond class naming.
	+ Cons: May be slower than using the `className` property, and some browsers may have issues with attribute handling.
* **classList**:
	+ Pros: Faster and more modern approach, widely supported in modern browsers.
	+ Cons: Only available in newer browsers (Chrome 8+, Firefox 4+), and requires more code to achieve the same result.

**Library/Additional features used**

None of the test cases use any external libraries or additional JavaScript features beyond what's already included in the benchmark. The `classList` API is a native feature that's been added to modern browsers, but it's not enabled by default for older browsers.

**Special JS features/syntax**

The benchmark does not use any special JavaScript features or syntax beyond what's required for the test cases.

**Other alternatives**

If you want to run this benchmark on different browsers or platforms, you can modify the `Html Preparation Code` and adjust the script preparation code accordingly. Additionally, you could add more test cases to compare other approaches, such as using CSS classes or other attribute manipulation methods.

Keep in mind that running a microbenchmark like this one requires careful consideration of factors like hardware, browser versions, and JavaScript engine optimizations. The results may vary depending on your specific environment and setup.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0

Browser/OS: Firefox 61 on Ubuntu

View result in a separate tab

Test name	Executions per second
className	2.2 Ops/sec
setAttribute	7884.0 Ops/sec
classList	4226.5 Ops/sec

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 6 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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