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

Test name	Executions per second
jQuery 3.3.1 addClass/removeClass	146792.3 Ops/sec
jQuery 2.1.4 addClass/removeClass	167526.6 Ops/sec
Vanilla JS classList add/remove	274223.6 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of adding and removing CSS classes from an HTML element using different methods: jQuery (versions 2.1.4 and 3.3.1) and vanilla JavaScript's `classList` API.

**Options Compared:**

* **jQuery 2.1.4 addClass/removeClass:** This approach uses the older `addClass()` and `removeClass()` methods provided by jQuery version 2.1.4.
* **jQuery 3.3.1 addClass/removeClass:** This approach uses the `addClass()` and `removeClass()` methods from jQuery version 3.3.1, a more recent version.

* **Vanilla JS classList add/remove:** This approach utilizes the native `classList.add()` and `classList.remove()` methods available in modern web browsers for directly manipulating classes on an HTML element.

**Pros and Cons:**

* **jQuery (both versions):**
    * **Pros:**  Well-established library with a wide range of features beyond class manipulation, potentially easier syntax for developers familiar with jQuery.
    * **Cons:** Adds extra overhead due to the library's size and potential impact on performance compared to native methods.

* **Vanilla JS classList:** 
    * **Pros:** Highly performant as it leverages built-in browser functionality, no external dependencies, lightweight.
    * **Cons:** Requires understanding of JavaScript DOM manipulation.

**Other Considerations:**

* **Version Differences:** The benchmark highlights the performance difference between jQuery versions, potentially suggesting newer versions have optimizations.
* **Library Dependencies:**  For most modern projects, relying on a library like jQuery might not be necessary for simple class management tasks. 
* **Specificity:** In scenarios where extensive DOM manipulation is required, other libraries or frameworks might offer more specialized features and performance benefits.

**Alternatives:**

* **CSS Classes and Media Queries:** For dynamic styling changes based on conditions, consider using CSS classes and media queries to control element appearances without relying heavily on JavaScript.

In summary, the benchmark demonstrates that vanilla JavaScript's `classList` API offers superior performance for adding and removing classes compared to jQuery. While jQuery provides a comprehensive ecosystem of tools, simpler tasks like class manipulation are often best handled with native methods for efficiency and code clarity.

Related benchmarks:

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

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

Jump 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 gemma2:9b, generated one year ago):