Benchmark: className vs. classList

HTML Preparation code:

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

Tests:

className =
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.className = 'bar'; element.className = ''; }
className +=
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.className += ' bar'; element.className = ''; }
classList
var element = document.getElementById('foo'); var i = 1000; while (i--) { element.classList.add('bar'); element.classList.remove('bar'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className =
className +=
classList

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmarking test case for measuring the performance of three different approaches to update the `className` property of an HTML element: using the `className` assignment operator (`=`), using string concatenation (`+`), and using the `classList` API.

**Options being compared:**

1. **className =**: This approach uses the assignment operator (`=`) to assign a new value to the `className` property.
2. **className +**: This approach uses string concatenation (`+`) to concatenate a new class name with the existing `className`.
3. **classList**: This approach uses the `classList` API, which is a part of the Web API that allows you to manage the classes of an element.

**Pros and Cons:**

* **className =**:
	+ Pros: Simple and straightforward.
	+ Cons: Can lead to slower performance due to string creation and assignment overhead.
* **className +**: 
	+ Pros: Avoids string creation overhead, as the new class name is concatenated with the existing one.
	+ Cons: Can be less readable and more error-prone than using `=` or `classList`.
* **classList**:
	+ Pros: Most efficient way to update classes, as it avoids creating a new string and directly modifies the element's class list.
	+ Cons: Requires knowledge of the Web API.

**Library/Library Purpose:** None in this specific benchmark, but note that some browsers may have built-in optimizations or caching mechanisms for certain APIs (e.g., `classList`).

**Special JS feature/Syntax:** The benchmark uses a simple while loop to repeat the update operation 1000 times. This is not a special JavaScript feature or syntax, just a straightforward way to demonstrate performance differences.

Other alternatives:

* **Using `setAttribute('class', 'bar')`**: Another approach that can be used to set the class attribute directly.
* **Using `element.classList.add()` followed by `element.classList.remove()```**: An alternative implementation using the `classList` API for both adding and removing classes.
* **Using a library like Lodash or Moment.js for string manipulation** : If you need to perform more complex string operations, you might consider using a library like Lodash or Moment.js.

Keep in mind that the performance differences between these approaches may vary depending on the specific browser, hardware, and JavaScript engine. MeasureThat.net provides a useful platform for benchmarking and comparing performance characteristics of different approaches.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36 Edg/96.0.1054.53

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className =	2433.6 Ops/sec
className +=	1919.4 Ops/sec
classList	1154.8 Ops/sec

Related benchmarks:

className vs. classList (version: 0)

Fork from https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist

Comparing performance of: className = vs className += vs classList

Created: 6 years ago by: Guest

Jump to the latest result

className =

className +=

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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