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"+i; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", element.getAttribute("class") + " bar"+i); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"+i); }

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

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 llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Description**

The benchmark measures the performance of three different approaches to modify the `class` attribute of an HTML element:

1. **className**: Using the `className` property directly to append new classes.
2. **setAttribute**: Using the `setAttribute` method to set a custom attribute with a value that includes the class name and a counter.
3. **classList**: Using the `classList` property to add new classes.

**Options Compared**

Each approach has its own trade-offs:

* **className**: This is the most straightforward way to append classes, but it can be slower due to the overhead of parsing and generating the new class string. Additionally, this method can lead to issues with CSS specificity and class naming conventions.
* **setAttribute**: This method uses a custom attribute to store the class name and counter. While this approach avoids some potential issues with `className`, it also introduces additional overhead due to the need to parse and generate the custom attribute value. Furthermore, using custom attributes can lead to inconsistencies in HTML parsing and validation.
* **classList**: This is the recommended way to add classes in modern JavaScript, as it provides a more convenient and efficient way to manage class names. However, its performance may vary depending on the browser's implementation.

**Pros and Cons**

Here are some pros and cons for each approach:

* **className**:
	+ Pros: Simple and easy to understand.
	+ Cons: May lead to CSS specificity issues, can be slower due to parsing overhead.
* **setAttribute**:
	+ Pros: Avoids potential CSS specificity issues.
	+ Cons: Introduces additional overhead, may not work well with HTML validation tools.
* **classList**:
	+ Pros: Convenient and efficient way to manage class names.
	+ Cons: May have varying performance depending on browser implementation.

**Library Usage**

None of the test cases use a specific library. However, it's worth noting that `classList` is a standard property introduced in ECMAScript 2015 (ES6), so most modern browsers support it.

**Special JS Features or Syntax**

None of the provided benchmark test cases rely on special JavaScript features or syntax beyond what's covered by the ECMAScript 2015 standard. However, some older browsers may not support `classList`, which could affect performance.

**Alternatives**

If you wanted to modify the class name of an HTML element without using these three approaches, you might consider:

* Using a library like jQuery, which provides its own methods for manipulating classes.
* Creating a custom function or utility to handle class manipulation.
* Using a CSS preprocessor like Sass or Less to generate the new class string.

Keep in mind that these alternatives would likely introduce additional overhead and may not be as efficient as using `className`, `setAttribute`, or `classList`.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 8 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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