Benchmark: jQuery addClass vs jQuery classList.add vs querySelector classList.add111

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");
jQuery classList.add
$("#el")[0].classList.add("test");
querySelector classList.add
document.querySelector("#el").classList.add("test");
getElementById classList.add
document.getElementById("el").classList.add("test");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery addClass
jQuery classList.add
querySelector classList.add
getElementById classList.add

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Overview**

The benchmark measures the performance difference between four different ways to add a class to an HTML element:

1. jQuery `addClass` method
2. jQuery `classList.add` method (with `$()` notation)
3. `querySelector` with `classList.add`
4. `getElementById` with `classList.add`

**Comparison**

The benchmark compares the performance of these four approaches in Chrome 78 on a Windows 7 desktop.

Here's a brief overview of each approach:

* **jQuery `addClass` method**: This is a simple method that adds a class to an element without removing any existing classes. It's widely used in web development but can lead to issues if not used carefully.
* **jQuery `classList.add` method (with `$()` notation)**: This method uses the `classList` property of the element and adds a new class to it. The `$()` notation is used to select the element, which can be slower than using `querySelector`.
* **`querySelector` with `classList.add`**: This approach uses the `querySelector` API to select an element by its CSS selector and then calls `classList.add` on that element.
* **`getElementById` with `classList.add`**: This approach uses the `getElementById` method to retrieve an element by its ID and then calls `classList.add` on that element.

**Pros/Cons of each approach**

Here's a brief summary:

* **jQuery `addClass` method**:
	+ Pros: Simple, widely supported
	+ Cons: Can lead to issues with class duplication, slower performance compared to other methods
* **jQuery `classList.add` method (with `$()` notation)**:
	+ Pros: More flexible than `addClass`, faster performance
	+ Cons: Requires jQuery library, can be slower due to the extra step of selecting the element
* **`querySelector` with `classList.add`**:
	+ Pros: Fast, efficient, modern API
	+ Cons: Not supported in older browsers, may require additional setup for performance
* **`getElementById` with `classList.add`**:
	+ Pros: Simple, fast
	+ Cons: Requires retrieval of the element by its ID, which can be slower than using other methods

**Library usage**

The benchmark uses jQuery library to provide the `addClass` and `classList.add` methods. The `querySelector` method is a native API in modern browsers.

**Special JS features/syntax**

None of the test cases use special JavaScript features or syntax beyond what's standard for modern web development (e.g., no async/await, no let/catch).

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Browser/OS: Chrome 78 on Windows 7

View result in a separate tab

Test name	Executions per second
jQuery addClass	459264.4 Ops/sec
jQuery classList.add	753642.2 Ops/sec
querySelector classList.add	1155388.9 Ops/sec
getElementById classList.add	1588467.1 Ops/sec

Related benchmarks:

jQuery addClass vs jQuery classList.add vs querySelector classList.add111 (version: 0)

Comparing performance of: jQuery addClass vs jQuery classList.add vs querySelector classList.add vs getElementById classList.add

Created: 4 years ago by: Registered User

Jump to the latest result

jQuery addClass

jQuery classList.add

querySelector classList.add

getElementById classList.add

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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