Benchmark: classList toggle false vs. classList remove

HTML Preparation code:

<style type="text/css">
        .hide {
            display: none;
        }
</style>
<div id="foo"></div>

Tests:

classList toggle
var element = document.getElementById("foo"); var i = 3000; while (i--) { element.classList.toggle("hide" , false); }
classList add hide
var element = document.getElementById("foo"); var i = 3000; while (i--) { element.classList.remove("hide"); }

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

classList toggle

5K/s

classList add hide

3K/s

Fastest: classList toggle (1.5x faster)

View exact numbers

✓ classList toggle: 4,656 ops/sec
• classList add hide: 3,151 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
classList toggle
classList add hide

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/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser/OS: Chrome 134 on Windows

View result in a separate tab

classList toggle

4K/s

classList add hide

2K/s

View exact numbers

Test name	Executions per second
✓ classList toggle	3,618 Ops/sec
classList add hide	2,366 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 explain what's being tested.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark consists of two individual test cases, each measuring the performance difference between two approaches: `classList.toggle(false)` and `classList.remove('hide')`.

**Options Compared**

The benchmark compares the performance of two different options:

1. **`classList.toggle('hide', false)`**: This method toggles the presence of a class with the value `'hide'`, setting it to `false`.
2. **`classList.remove('hide')`**: This method removes a class with the value `'hide'`.

**Pros and Cons**

Both methods have their pros and cons:

* **`classList.toggle('hide', false)`**:
	+ Pros: This method is concise and easy to read.
	+ Cons: It can be slower due to the additional parameter, as the browser needs to parse it before applying the change.
* **`classList.remove('hide')`**:
	+ Pros: This method is faster, as it only involves removing a class without any additional parameters.
	+ Cons: The code may look less readable and more verbose.

**Library and Purpose**

In both test cases, the `Element.classList` API is used. This API provides methods for managing classes on an element:

* `classList`: returns the `HTMLStyleRuleList` object containing all classes defined on an element.
* `toggle(class_name, force)` (in this case): adds or removes a class with the specified value, depending on the second parameter (`force = false`).
* `remove(class_name)`: removes a class with the specified value.

**Special JS Feature**

There is no special JavaScript feature or syntax being tested in this benchmark. The focus is solely on comparing the performance of two different class management approaches.

**Other Alternatives**

For those interested, here are some alternative approaches for managing classes:

1. **`getAttribute()` and `setAttribute()`**: Using these methods to set and remove attributes can be an alternative approach, but it's generally less efficient than using the `classList` API.
2. **`style.display = 'none'`**: This method sets the `display` property to `'none'`, effectively hiding an element without removing a class.

Keep in mind that these alternatives may have different performance characteristics and are not necessarily more efficient or readable than the `classList` API approaches being tested.

classList toggle false vs. classList remove (version: 0)

Comparing performance of: `classList toggle vs classList add hide`

Created: 4 years ago by: Guest

Go to the latest result

classList toggle

classList add hide

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

classList toggle false vs. classList remove (version: 0)

Comparing performance of: classList toggle vs classList add hide

Created: 4 years ago by: Guest

Go to the latest result

classList toggle

classList add hide

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Chrome 13 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: `classList toggle vs classList add hide`