Benchmark: classList toggle vs. classList add hide

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" , true); element.classList.toggle("hide" , false); }
classList add hide
var element = document.getElementById("foo"); var i = 3000; while (i--) { element.classList.add("hide"); element.classList.remove("hide"); }

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

classList add hide

595/s

classList toggle

558/s

View exact numbers

✓ classList add hide: 595 ops/sec
• classList toggle: 558 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: 10 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Linux

View result in a separate tab

classList toggle

235/s

classList add hide

223/s

View exact numbers

Test name	Executions per second
✓ classList toggle	235 Ops/sec
classList add hide	223 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test on MeasureThat.net. The benchmark is designed to compare the performance of two different approaches for toggling or adding/removing a class from an HTML element.

**Test Cases: ClassList Toggle vs. ClassList Add Hide**

There are two individual test cases:

1. `classList toggle`: This test case uses the `classList.toggle()` method to add and remove the "hide" class from an HTML element, 3000 times in a while loop.
2. `classList add hide`: This test case uses the `classList.add()` and `classList.remove()` methods to add and remove the "hide" class from an HTML element, 3000 times in a while loop.

**Options Compared**

The two test cases compare the performance of using `classList.toggle()` versus using `classList.add()` and `classList.remove()` individually. This allows users to see which approach is faster for this specific use case.

**Pros and Cons of Each Approach:**

1. **`classList.toggle()`**:
	* Pros: More concise, eliminates the need for explicit addition and removal of classes.
	* Cons: May not be as efficient as using `classList.add()` and `classList.remove()` individually, as it may require additional checks to ensure correct behavior (e.g., handling cases where the class is already present or absent).
2. **`classList.add()` and `classList.remove()`**:
	* Pros: Can be more efficient than `classList.toggle()`, as it allows for more control over when classes are added and removed.
	* Cons: Requires additional code to manage the addition and removal of classes, which can make the code longer and less concise.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Code readability and maintainability: `classList.toggle()` may be more concise, but `classList.add()` and `classList.remove()` provide more explicit control over class management.
* Performance: The actual performance difference between these approaches may be small, especially for simple use cases. However, if you need to manage complex class hierarchies or perform frequent additions and removals, using `classList.add()` and `classList.remove()` individually may be a better choice.

**Library Used**

No libraries are explicitly mentioned in the provided JSON. The `classList` API is built into modern JavaScript engines, so no additional libraries are required to use these methods.

**Special JS Features or Syntax**

There are no special features or syntax used in this benchmark that require knowledge of advanced JavaScript concepts. The code is straightforward and easy to understand.

**Alternatives**

If you're interested in exploring alternative approaches for toggling or adding/removing classes, consider the following options:

* Using a library like jQuery's `addClass()` and `removeClass()` methods, which can provide a more concise and efficient way of managing classes.
* Implementing custom class management logic using JavaScript, such as using a separate object to store class metadata and update it dynamically.
* Considering alternative approaches, such as using CSS transitions or animations to achieve the desired class toggling behavior.

classList toggle vs. classList add hide (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 20 community runs

Desktop Results:

Chrome 20 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 vs. classList add hide (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 20 community runs

Desktop Results:

Chrome 20 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`