Benchmark: ClassName.replace vs ClassList.remove

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var element = document.getElementById('test');

Tests:

ClassName
for(i=0; i<100000; i++){ element.className = element.className.replace('newclass', ''); }
ClassList
for(i=0; i<100000; i++){ element.classList.remove('newclass'); }

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 year 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
ClassName	159.5 Ops/sec
ClassList	92.3 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 provided benchmark and its results.

**Benchmark Overview**

The benchmark is designed to compare two approaches for removing a class from an HTML element in JavaScript: `className.replace()` and `classList.remove()`. The goal is to determine which method is faster.

**Script Preparation Code**

The script preparation code is:
```javascript
var element = document.getElementById('test');
```
This code retrieves the first `<div>` element with the id "test" from the HTML page.

**Html Preparation Code**

The HTML preparation code is:
```html
<div id='test'></div>
```
This code creates a simple HTML page with a single `<div>` element that will be used for the benchmark.

**Test Cases**

There are two test cases:

1. **ClassName**: This test case uses the `className.replace()` method to remove the class "newclass" from the `element` object 100,000 times.
```javascript
for(i=0; i<100000; i++){\r\n  \telement.className = element.className.replace('newclass', '');\r\n}\r\n
```
2. **ClassList**: This test case uses the `classList.remove()` method to remove the class "newclass" from the `element` object 100,000 times.
```javascript
for(i=0; i<100000; i++){\r\n    element.classList.remove('newclass');\r\n}\r\n
```
**Library: None**

There is no external library used in this benchmark.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark that require explanation.

**Results**

The latest benchmark results show the execution rate per second for each test case:

1. **ClassName**: 19.05280303955078 executions per second
2. **ClassList**: 17.628204345703125 executions per second

This suggests that `className.replace()` is faster than `classList.remove()`. However, it's essential to consider the following factors:

* **Browser support**: The results are from Chrome 109 on a desktop platform. Other browsers may have different performance characteristics.
* **Hardware and software environment**: The test was run on a Windows machine with a relatively modern processor. Other hardware configurations may affect performance.

**Alternatives**

Other approaches to remove a class from an HTML element in JavaScript include:

1. `document.querySelector('#test').classList.remove('newclass')`: This method uses the `querySelector` API to select the element and then calls `classList.remove()` on it.
2. `element.className = element.className.replace('newclass', ''); document.body.removeChild(element)`: This approach removes the element from the DOM after removing the class, which may have performance implications.

However, these alternatives are not tested in the provided benchmark, so it's difficult to say whether they would produce different results or be more suitable for specific use cases.

Related benchmarks:

ClassName.replace vs ClassList.remove (version: 0)

FInd out what is the fastest way to remove a class in JavaScript

Comparing performance of: ClassName vs ClassList

Created: 5 years ago by: Registered User

Jump to the latest result

ClassName

ClassList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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