Benchmark: addClass/removeClass vs classList.add/remove

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script type="text/javascript">
  var jq331 = $.noConflict(true);
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>
<script type="text/javascript">
  var jq214 = $.noConflict(true);
</script>
<div id="testElement"></div>

Tests:

jQuery 3.3.1 addClass/removeClass
var element = jq331('#testElement'); element.removeClass('test-class'); element.addClass('test-class'); element.removeClass('test-class');
jQuery 2.1.4 addClass/removeClass
var element = jq214('#testElement'); element.removeClass('test-class'); element.addClass('test-class'); element.removeClass('test-class');
Vanilla JS classList add/remove
var element = jq331('#testElement')[0]; element.classList.remove('test-class'); element.classList.add('test-class'); element.classList.remove('test-class');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery 3.3.1 addClass/removeClass
jQuery 2.1.4 addClass/removeClass
Vanilla JS classList 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; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Windows

View result in a separate tab

Vanilla JS classList add/remove

274K/s

jQuery 2.1.4 addClass/removeClass

168K/s

jQuery 3.3.1 addClass/removeClass

147K/s

View exact numbers

Test name	Executions per second
✓ Vanilla JS classList add/remove	274,224 Ops/sec
jQuery 2.1.4 addClass/removeClass	167,527 Ops/sec
jQuery 3.3.1 addClass/removeClass	146,792 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested and compared in this benchmark.

**What's being tested?**

The benchmark is testing the performance of three different approaches to adding and removing a CSS class from an HTML element:

1. Using jQuery 3.3.1 (`jq331`) to addClass/removeClass.
2. Using jQuery 2.1.4 (`jq214`) to addClass/removeClass.
3. Using vanilla JavaScript (without any library) to manipulate the `classList` property of an HTML element.

**What options are compared?**

The benchmark is comparing the execution speed (Executions Per Second, EPS) of each approach on a Windows desktop system running Firefox 130. The three test cases are:

1. **jQuery 3.3.1 addClass/removeClass**: This test uses jQuery 3.3.1 to remove and then re-add a CSS class (`test-class`) from an HTML element.
2. **jQuery 2.1.4 addClass/removeClass**: Similar to the first test, but using jQuery 2.1.4 instead.
3. **Vanilla JS classList add/remove**: This test uses vanilla JavaScript to manipulate the `classList` property of an HTML element, adding and removing the same CSS class (`test-class`).

**Pros/Cons of each approach:**

* **jQuery (both versions)**:
	+ Pros: Easy to use, concise code.
	+ Cons: Additional overhead due to jQuery's library size and execution time.
	+ Note: The results show that using jQuery 3.3.1 is slower than vanilla JavaScript, while jQuery 2.1.4 falls somewhere in between.
* **Vanilla JS classList**:
	+ Pros: Lightweight, no additional library dependencies.
	+ Cons: More verbose code compared to jQuery.

**Other considerations:**

* The benchmark results show that using vanilla JavaScript with `classList` is the fastest approach on this particular system.
* The performance difference between jQuery 3.3.1 and jQuery 2.1.4 might be due to various factors, such as library optimizations or changes in browser behavior over time.

**The library used:**

In this benchmark, two versions of the jQuery library are used:

1. **jQuery 3.3.1**: The latest version at the time of writing.
2. **jQuery 2.1.4**: An older version of jQuery.

**Special JS feature or syntax:**

None in this case.

addClass/removeClass vs classList.add/remove (version: 0) Benchmark.js

jQuery addClass/removeClass vs classList.add/remove

Comparing performance of: `jQuery 3.3.1 addClass/removeClass vs jQuery 2.1.4 addClass/removeClass vs Vanilla JS classList add/remove`

Created: 8 years ago by: Guest

Go to the latest result

jQuery 3.3.1 addClass/removeClass

jQuery 2.1.4 addClass/removeClass

Vanilla JS classList add/remove

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

addClass/removeClass vs classList.add/remove (version: 0) Benchmark.js

jQuery addClass/removeClass vs classList.add/remove

Comparing performance of: jQuery 3.3.1 addClass/removeClass vs jQuery 2.1.4 addClass/removeClass vs Vanilla JS classList add/remove

Created: 8 years ago by: Guest

Go to the latest result

jQuery 3.3.1 addClass/removeClass

jQuery 2.1.4 addClass/removeClass

Vanilla JS classList add/remove

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

Related benchmarks

Comparing performance of: `jQuery 3.3.1 addClass/removeClass vs jQuery 2.1.4 addClass/removeClass vs Vanilla JS classList add/remove`