Benchmark: Comparison of replacing a class with className, classList.replace and setAttribute

Comparison of replacing a 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 - 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: 5 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div id="test" class="no-js">

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

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Element.className	9598.8 Ops/sec
Element.classList	14771.6 Ops/sec
Element.setAttribute	14359.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark, MeasureThat.net, that compares the performance of three different approaches for replacing the class name of an HTML element: `element.className`, `element.classList.replace()`, and `element.setAttribute('class', 'js')`. The benchmark aims to measure which approach is the fastest.

**Approaches Compared**

1. **Element.className**: This method uses a property-based approach, where the old value is removed from the class list and the new value is appended.
2. **Element.classList.replace()**: This method uses a more modern approach, where the old class name is replaced with the new one using the `replace()` method on the `classList` object.
3. **Element.setAttribute('class', 'js')**: This method uses an attribute-based approach, where the entire `class` attribute is set to `'js'`, effectively replacing any existing classes.

**Pros and Cons of Each Approach**

1. **Element.className**
	* Pros: Simple and widely supported in older browsers.
	* Cons: May be slower due to the need to parse the class list and remove the old value.
2. **Element.classList.replace()**
	* Pros: More efficient and modern, as it avoids parsing the class list.
	* Cons: Requires support for modern classes and `classList` API, which may not be available in older browsers.
3. **Element.setAttribute('class', 'js')**
	* Pros: Fastest approach, as it sets a single attribute without any parsing required.
	* Cons: May require more memory allocation due to setting an entirely new class list.

**Library Usage**

None of the approaches use external libraries.

**Special JavaScript Features/Syntax**

1. **`classList` API**: Used in the `Element.classList.replace()` approach, this is a modern API introduced in ECMAScript 2015 (ES6) for managing classes on elements.
2. **Template literals (`\r\n`)**: Used in the `Benchmark Definition`, template literals provide a concise way to embed expressions inside string literals.

**Other Alternatives**

1. **`Element.classList.add()` and `Element.classList.remove()`:** These methods are also part of the modern `classList` API but may be slower than setting the entire class list using `setAttribute`.
2. **DOM mutations:** Other DOM mutation approaches, like adding/removing classes or attributes using `document.getElementById().className` or `document.getElementById().setAttribute`, would likely be slower and less efficient compared to the methods tested in this benchmark.

Keep in mind that performance differences between these approaches may vary depending on the specific use case, browser version, and hardware platform. This benchmark provides a general comparison of these three common approaches for replacing class names in JavaScript.

Related benchmarks:

Comparison of replacing a class with className, classList.replace and setAttribute (version: 0)

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

Created: 5 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 6 months ago):