Benchmark: Replace surrounded class with className, classList.replace and setAttribute

Replace surrounded class with className, classList.replace and setAttribute (version: 0)

Compares performance of changing the class name through one of the following three interfaces: Element.className Element.classList.replace and Element.setAttribute. Inspiration originates from "Avoiding the FOUC v3.0": https://www.paulirish.com/2009/avoiding-the-fouc-v3/ Preparation code is based on this test: https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist

Comparing performance of: Element.className vs Element.classList vs Element.setAttribute

Created: 4 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div id="test" class="before no-js after something-else">

Tests:

Element.className
const element = document.getElementById("test"); let i = 1000; while (i--) { element.className = element.className.replace(/\bno-js\b/, 'js'); }
Element.classList
const element = document.getElementById("test"); let i = 1000; while (i--) { element.classList.replace('no-js', 'js'); }
Element.setAttribute
const element = document.getElementById("test"); let i = 1000; while (i--) { element.setAttribute('class', 'js'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Element.className
Element.classList
Element.setAttribute

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

The test being performed is to compare the performance of three different ways to change the class name of an HTML element in JavaScript:

1. `Element.className`: This method replaces the entire value of the `className` property with the new class name. The problem with this approach is that it can lead to a FOUC (Flash of Unstyled Content) issue, where the content flashes briefly before being styled.

2. `Element.classList.replace()`: This method uses the `replace()` method on the `classList` object to replace the old class with the new one. This method avoids the FOUC issue and is generally considered more efficient.

3. `Element.setAttribute('class', 'js')`: This method sets the value of the `class` attribute directly, which can also be used to change the class name of an element. However, this method may not work as expected if the element has other attributes that contain class names.

The pros and cons of each approach are:

- `Element.className`:
	+ Pros: Simple and easy to understand.
	+ Cons: Can lead to FOUC issues.
- `Element.classList.replace()`: 
	+ Pros: Avoids FOUC issues, more efficient.
	+ Cons: Requires a DOM element that has a classList property.

The latest benchmark results show that the `Element.classList.replace()` method is the fastest followed by `Element.setAttribute` and then `Element.className`.

A library called `class-list`, created by Paul Irish (the same person who wrote the "Avoiding the FOUC v3.0" article), provides a polyfill for `classList`. It allows you to add event listeners to class changes, which can be useful in certain scenarios.

There is no special JavaScript feature or syntax being tested in this benchmark.

Other alternatives for changing the class name of an HTML element include using CSS classes and JavaScript variables to dynamically update the class names. However, these approaches may not be as efficient as using the `classList` property or setting the `class` attribute directly.

It's worth noting that there are also more modern approaches to handling class changes in JavaScript, such as using the `addEventListener()` method to listen for class change events on the element itself, rather than relying on the `classList` property. However, these approaches may require additional setup and are not necessarily faster than using `classList` or setting the `class` attribute directly.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36

Browser/OS: Chrome 85 on Linux

View result in a separate tab

Test name	Executions per second
Element.className	2786.1 Ops/sec
Element.classList	4969.1 Ops/sec
Element.setAttribute	2257.3 Ops/sec

Related benchmarks:

Replace surrounded class with className, classList.replace and setAttribute (version: 0)

Comparing performance of: Element.className vs Element.classList vs Element.setAttribute

Created: 4 years ago by: Registered User

Jump to the latest result

Element.className

Element.classList

Element.setAttribute

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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