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 "; }
classList
var element = document.getElementById("foo"); var i = 1000; var cl = element.classList; while (i--) { cl.add("bar"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Android 14; Mobile; rv:134.0) Gecko/134.0 Firefox/134.0

Browser/OS: Firefox Mobile 134 on Android

View result in a separate tab

Test name	Executions per second
className	2.0 Ops/sec
classList	2449.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches for adding classes to an HTML element: using `className` or using the `classList` property.

**Script Preparation Code and Html Preparation Code**

The script preparation code is empty, which means that the test cases will use a pre-existing JavaScript environment. The html preparation code creates a simple HTML element with an ID of "foo".

**Individual Test Cases**

There are two test cases:

1. **className**: This test case uses a `while` loop to add the string "bar " repeatedly to the `className` property of the `element`. The loop iterates 1000 times, which is likely intended to be a high number to stress the JavaScript engine.
2. **classList**: This test case also adds the string "bar" repeatedly to the `classList` property of the `element`, but uses the `add()` method instead of concatenating strings.

**Library and Special JS Features**

There are no libraries mentioned in this benchmark, and it does not use any special JavaScript features such as `let` or `const`. The only notable thing is that the test case for `classList` uses the `add()` method, which was introduced in ECMAScript 2017 (ES7).

**Pros and Cons of Each Approach**

1. **className**: This approach has some drawbacks:
	* String concatenation can lead to performance issues due to string creation and garbage collection.
	* The `while` loop may cause unexpected behavior if the browser's JavaScript engine is not optimized for infinite loops.
2. **classList**: This approach has several advantages:
	* It avoids string concatenation, which can improve performance.
	* The `add()` method is designed for efficient class addition and removal.
	* It is a more modern and explicit way of adding classes to an element.

**Other Alternatives**

If you wanted to add classes to an HTML element in JavaScript, there are other alternatives:

1. **`document.body.classList.add()`**: This would add the string "bar" as a single class name to the element's `classList`. While this is not exactly what the benchmark tests, it could be used as an alternative.
2. **`element.className += 'bar '`;`**: This would concatenate the string "bar " to the existing `className`, which could potentially lead to performance issues due to string creation and garbage collection.

**Benchmark Results**

The benchmark results show that the test case for `classList` outperforms the one for `className`. This is expected, given the advantages of using the `add()` method.

Related benchmarks:

className vs classList (version: 0)

Comparing performance of: className vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

classList

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