Benchmark: append 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", "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.

**Overview**

The provided benchmark measures the performance of three different approaches for adding a class to an HTML element: `className`, `setAttribute`, and `classList`. The benchmark is designed to compare the execution speed of these methods in modern web browsers.

**Benchmark Definition**

The benchmark definition json contains the following information:

* `Name`: "append className vs. setAttribute vs. classList"
* `Description`: null
* `Script Preparation Code`: null
* `Html Preparation Code`: A simple HTML element with an ID "foo".

**Test Cases**

There are three individual test cases, each representing a different approach for adding a class to the HTML element:

1. **className**: Uses the `className` property to add a class to the element.
2. **setAttribute**: Uses the `setAttribute` method to set the `class` attribute of the element with the desired value.
3. **classList**: Uses the `classList.add()` method to add a class to the element.

**Options Compared**

The benchmark compares the execution speed of three options:

1. **className**: Adds a class to the element using the `className` property.
2. **setAttribute**: Sets the `class` attribute of the element with the desired value using the `setAttribute` method.
3. **classList**: Adds a class to the element using the `classList.add()` method.

**Pros and Cons**

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

1. **className**:
	* Pros: Simple, widely supported, and fast.
	* Cons: May lead to less readable code if not used correctly (e.g., concatenating multiple classes).
2. **setAttribute**:
	* Pros: Fast, but may be less efficient than `className` due to attribute lookup.
	* Cons: Requires more characters and may lead to a larger payload.
3. **classList**:
	* Pros: More readable, efficient, and flexible (supports multiple classes).
	* Cons: May require additional code and polyfills for older browsers.

**Library**

The benchmark uses the `classList` property, which is a part of the HTML5 specification. The `classList.add()` method is supported by most modern web browsers, but may require additional polyfills for older versions.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. However, it's worth noting that the `classList` approach relies on the `classList` property being implemented correctly by the browser.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **innerHTML**: Sets the inner HTML of the element with the desired value.
2. **style**: Adds CSS styles to the element using the `style` attribute.
3. **DOM manipulation libraries**: Libraries like jQuery or React might provide additional methods for manipulating elements, but these approaches may not be as efficient as the native DOM methods used in this benchmark.

In summary, the `className` approach is a simple and widely supported way to add classes to HTML elements, while the `setAttribute` method provides an alternative with fast execution. The `classList` approach offers more readability and flexibility, but may require additional code and polyfills for older browsers.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 2 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):