Benchmark: className vs. setAttribute vs. classList 2

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; var name = 'bar' var rgx = new RegExp('(\\s|^)' + name + '(\\s|$)'); var match = element.className.match( rgx ); while (i--) { if(! element.className.match( rgx ) ){ element.className += " "+name; } }
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

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 dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark is comparing three approaches to add a class to an HTML element:

1. `className`
2. `setAttribute` (adding a CSS style attribute)
3. `classList` (using the `classList` API)

**Options Comparison**

Each approach has its pros and cons:

* **`className`**: This method appends the new class name to the existing class names, separated by spaces. For example, if the element already has "foo" and "bar" classes, adding a new "baz" class will result in "foo baz bar". This approach can lead to messy class names, especially if you have many elements with multiple classes.
* **`setAttribute`**: Setting an attribute directly on the element is generally faster than modifying a property like `className`. However, this method requires setting a specific CSS style (e.g., "class: foo"), which might not be desirable in all cases. Moreover, using this approach can lead to inconsistencies if you need to access the class name programmatically.
* **`classList`**: The `classList` API is a more modern and convenient way to manage classes on elements. It provides a clear and consistent way to add, remove, or toggle classes. This method is generally faster than modifying `className`, but it requires support for this specific feature in browsers.

**Library: RegExp**

In the first test case, `var rgx = new RegExp('(\\\\s|^)' + name + '(\\\\s|$)');` creates a regular expression to match the class name with leading/trailing whitespace. The purpose of this library is to extract the class name from the element's `className` property.

**Special JS Feature/ Syntax**

The benchmark uses JavaScript features specific to WebKit-based browsers (e.g., Chrome OS). The presence of Safari and Chrome in the results indicates that these browsers are using their respective optimizations for handling classes. This might be a result of optimized compilation or specific engine implementations.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some:

* **`style` attribute**: Instead of setting an attribute directly on the element, you could use the `style` attribute to set CSS styles. However, this method is generally slower and less efficient than using `className`, `setAttribute`, or `classList`.
* **`querySelector`/`querySelectorAll`**: You can also use `document.getElementById("foo").querySelector(".bar")` (or `.querySelectorAll`) to select elements with a specific class name. This approach requires the element to be visible in the DOM, which might not always be the case.

In summary, MeasureThat.net is comparing three approaches to add classes to HTML elements: `className`, `setAttribute`, and `classList`. Each method has its pros and cons, and understanding these differences can help you make informed decisions about how to manage classes on your web applications.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

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