Benchmark: classList.remove vs. className.indexOf then remove

HTML Preparation code:

<div id="foo" class="bar"></div>
<div id="blarg" class="baz"></div>

Script Preparation code:

var test_element_has = document.getElementById("foo");
var test_element_hasnt = document.getElementById("blarg");

Tests:

className.indexOf before remove
function remove(elem) { if( elem.className.indexOf('bar') != -1 ) elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
classList.contains before remove
function remove(elem) { if( elem.classList.contains('bar') != -1 ) elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
classList.remove without checking
function remove(elem) { elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
className splice
function remove(elem) { elem.className = elem.className.replace('bar',''); } remove(test_element_has); remove(test_element_hasnt);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className.indexOf before remove
classList.contains before remove
classList.remove without checking
className splice

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/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Windows

View result in a separate tab

Test name	Executions per second
className.indexOf before remove	4121886.5 Ops/sec
classList.contains before remove	1122349.6 Ops/sec
classList.remove without checking	1245389.2 Ops/sec
className splice	1974463.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares four different approaches to removing a CSS class from an HTML element:

1. `className.indexOf` followed by `classList.remove`
2. `classList.contains` followed by `classList.remove`
3. Directly calling `classList.remove` without checking
4. Using the `replace()` method on the `className` property

**Options Compared**

The benchmark tests four options, each with its pros and cons:

* **Option 1: `className.indexOf` followed by `classList.remove`**
	+ Pros:
		- Efficient way to check if a class is present
		- Fast lookup
	+ Cons:
		- Requires an additional function call (`remove()`), which may incur overhead
		- Returns the index of the first occurrence, which might not be what you want
* **Option 2: `classList.contains` followed by `classList.remove`**
	+ Pros:
		- More straightforward and readable than Option 1
		- Avoids unnecessary function calls
	+ Cons:
		- May be slower due to the additional method call (`contains()`)
		- Requires a DOM API (not all browsers support it)
* **Option 3: Directly calling `classList.remove` without checking**
	+ Pros:
		- Simple and concise code
		- Fast execution time (no extra function calls or DOM API interactions)
	+ Cons:
		- May not work as expected if the element is already in a different state (e.g., having multiple classes)
		- No explicit error handling for non-existent class names
* **Option 4: Using `replace()` on `className`**
	+ Pros:
		- Fast and efficient removal of the class
		- Simple code with minimal overhead
	+ Cons:
		- May be less readable than other options due to its unusual syntax
		- Can lead to unexpected results if not used carefully (e.g., removing all classes, not just the specified one)

**Library and Special JS Features**

* **`classList.remove()`**: This is a modern JavaScript method introduced in ECMAScript 2015 (ES6) that allows you to remove one or more CSS classes from an element. It's widely supported across browsers.
* **`classList.contains()`**: Another modern method introduced in ES6, which checks if the element contains a specific class.
* **`replace()` on `className`**: This is an older method (available since IE 9) that replaces the specified class with an empty string.

**Other Considerations**

When writing JavaScript code that manipulates DOM elements and CSS classes, consider factors such as:

* Browser support: Ensure your code works across different browsers, especially older ones.
* Performance optimization: Use efficient algorithms and minimize unnecessary function calls or DOM API interactions.
* Code readability: Write clear, concise code that's easy to understand and maintain.

**Alternative Approaches**

If you're looking for alternative approaches to removing CSS classes from an element, consider:

* Using a library like jQuery (although it's not needed in modern JavaScript)
* Creating a custom method using `indexOf()` and slicing the string
* Using a different approach altogether, such as using a temporary class name or modifying the DOM directly

Keep in mind that each option has its pros and cons, and the best approach depends on your specific use case, performance requirements, and code readability goals.

Related benchmarks:

classList.remove vs. className.indexOf then remove (version: 0)

Comparing performance of: className.indexOf before remove vs classList.contains before remove vs classList.remove without checking vs className splice

Created: 5 years ago by: Guest

Jump to the latest result

className.indexOf before remove

classList.contains before remove

classList.remove without checking

className splice

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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