Benchmark: toggle vs add/remove 2

HTML Preparation code:

<div class="first class-one">Test</div>
<div class="second class-one">Test</div>

Tests:

toggle
var first = document.querySelector('.first'); first.classList.toggle('class-one'); first.classList.toggle('class-two');
add/remove
var second = document.querySelector('.second'); second.classList.remove('class-one'); second.classList.add('class-two');

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

add/remove

1.5M/s

toggle

940K/s

Fastest: add/remove (1.6x faster)

View exact numbers

✓ add/remove: 1,529,737 ops/sec
• toggle: 939,540 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
toggle
add/remove

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

add/remove

2.0M/s

toggle

1.4M/s

View exact numbers

Test name	Executions per second
✓ add/remove	2,004,421 Ops/sec
toggle	1,448,445 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the benchmark being tested on MeasureThat.net.

**What is being tested?**

The benchmark measures the performance difference between two approaches: `toggle` and `add/remove` for adding or removing classes from an HTML element.

**Options compared:**

1. **Toggle**: This approach uses the `classList.toggle()` method to add or remove a class from the element. It's a shorthand way of toggling a class, which means it adds the class if it doesn't exist and removes it if it does.
2. **Add/Remove**: This approach uses the `classList.remove()` and `classList.add()` methods separately to add or remove a class from the element.

**Pros and Cons:**

* **Toggle**: Pros:
	+ More concise code
	+ Can be more efficient, as it only requires a single method call
* Cons:
	+ Might be slower if the browser needs to parse the CSS rules for adding/removing the class
* **Add/Remove**: Pros:
	+ More explicit and predictable behavior
	+ Can be beneficial in certain scenarios where toggle might lead to unexpected behavior
* Cons:
	+ Requires more code, as it involves two separate method calls

**Library:**

The `classList` API is a built-in JavaScript feature that provides an easy way to manage CSS classes on HTML elements. It's part of the DOM (Document Object Model) and is supported by most modern browsers.

**Special JS feature/syntax:**

There is no special JavaScript feature or syntax being tested in this benchmark, but it does rely on the `classList` API, which is a standard feature in modern JavaScript.

**Other considerations:**

The benchmark also considers other factors that might affect performance, such as:

* The number of executions per second (measured in executionsPerSecond)
* The browser and device platform used
* The operating system used

**Alternatives:**

If you're interested in exploring alternative approaches to managing CSS classes on HTML elements, some options include:

1. Using inline styles with `style` attributes instead of `classList`
2. Using CSS classes without the `classList` API (e.g., by using `class` attributes or string concatenation)
3. Using libraries like jQuery or Lodash that provide their own class management APIs

Keep in mind that these alternatives might not be as efficient or convenient as the `classList` API, and may require more code or customization.

I hope this explanation helps you understand the benchmark being tested on MeasureThat.net!

toggle vs add/remove 2 (version: 0) Benchmark.js

-

Comparing performance of: `toggle vs add/remove`

Created: 6 years ago by: Guest

Go to the latest result

toggle

add/remove

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

toggle vs add/remove 2 (version: 0) Benchmark.js

-

Comparing performance of: toggle vs add/remove

Created: 6 years ago by: Guest

Go to the latest result

toggle

add/remove

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `toggle vs add/remove`