Benchmark: jQuery addClass vs classList.add

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="el"></div>

Script Preparation code:

document.getElementById("el").classList.remove("test");

Tests:

jQuery addClass
$("#el").addClass("test");
Javascript classList.add
document.getElementById("el").classList.add("test");

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 21 runs

Javascript classList.add

2.2M/s

jQuery addClass

976K/s

Fastest: Javascript classList.add (2.3x faster)

View exact numbers

✓ Javascript classList.add: 2,238,960 ops/sec
• jQuery addClass: 976,303 ops/sec

Firefox 6 runs

Javascript classList.add

3.6M/s

jQuery addClass

3.1M/s

Fastest: Javascript classList.add (1.2x faster)

View exact numbers

✓ Javascript classList.add: 3,631,444 ops/sec
• jQuery addClass: 3,109,288 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
jQuery addClass
Javascript classList.add

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Windows

View result in a separate tab

jQuery addClass

4.0M/s

Javascript classList.add

2.9M/s

View exact numbers

Test name	Executions per second
✓ jQuery addClass	4,028,748 Ops/sec
Javascript classList.add	2,910,725 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares two approaches to adding a class to an HTML element: jQuery's `addClass` method and the native `classList.add` method in modern JavaScript (ES6+).

**Options Compared**

There are only two options being compared:

1. **jQuery `addClass`**: This method is part of the popular jQuery library, which provides a simplified way to manipulate HTML elements.
2. **Native `classList.add`**: This method is part of the native JavaScript API and allows direct access to an element's class list.

**Pros and Cons**

* **jQuery `addClass`**:
	+ Pros: Simple to use, widely supported, and easy to implement.
	+ Cons: Requires including the jQuery library, which can add extra weight to your project, and may not be the most efficient way to manipulate elements (more on this later).
* **Native `classList.add`**:
	+ Pros: Lightweight, no dependencies required, and provides direct access to an element's class list.
	+ Cons: Requires ES6+ support in JavaScript engines, which might not be available in older browsers.

**Other Considerations**

The benchmark assumes that the test element (`<div id="el">`) has an existing class named "test" that will be removed before running each test. This is because both approaches need to add a new class to the element.

**Library: jQuery**

jQuery is a popular JavaScript library that simplifies HTML element manipulation. The `addClass` method adds a single class to an element, whereas the native `classList.add` method can add multiple classes at once.

**Special JS Feature/Syntax**

There's no special feature or syntax used in this benchmark, but it's worth noting that the `classList` API is a modern feature introduced in ES6+ JavaScript. If you need to support older browsers, you might need to use a polyfill or fallback approach.

**Alternative Approaches**

If you're looking for alternative approaches to adding classes to elements, here are a few:

1. **Using the `style` property**: You can use the `style` property to set the `className` property directly.
```javascript
document.getElementById("el").style.className = "test";
```
2. **Using a CSS class list library**: There are libraries like `class-list` that provide an easy way to work with class lists in older browsers.
3. **Using a custom implementation**: You can create your own implementation of the `classList.add` method using DOM manipulation or other techniques.

Keep in mind that each approach has its pros and cons, and the best choice depends on your specific use case and requirements.

jQuery addClass vs classList.add (version: 0)

Comparing performance of: `jQuery addClass vs Javascript classList.add`

Created: 9 years ago by: Registered User

Go to the latest result

jQuery addClass

Javascript classList.add

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 21 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

jQuery addClass vs classList.add (version: 0)

Comparing performance of: jQuery addClass vs Javascript classList.add

Created: 9 years ago by: Registered User

Go to the latest result

jQuery addClass

Javascript classList.add

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 21 runs

Firefox 6 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: `jQuery addClass vs Javascript classList.add`