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"); }

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 36 runs

classList

6K/s

className

2/s

Fastest: classList (2539.1x faster)

View exact numbers

✓ classList: 6,030 ops/sec
• className: 2 ops/sec

Firefox 12 runs

classList

4K/s

className

2/s

Fastest: classList (1876.6x faster)

View exact numbers

✓ classList: 4,403 ops/sec
• className: 2 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.0.0

Browser/OS: Chrome 150 on Windows

View result in a separate tab

classList

7K/s

className

2/s

View exact numbers

Test name	Executions per second
✓ classList	7,038 Ops/sec
className	2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

className vs classList (version: 0)

Comparing performance of: `className vs classList`

Created: 9 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 36 runs

Firefox 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

className vs classList (version: 0)

Comparing performance of: className vs classList

Created: 9 years ago by: Guest

Go to the latest result

className

classList

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 36 runs

Firefox 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `className vs classList`