Benchmark: jQuery 3.6.0 vs Vanilla JS

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="test">blah</div>
<div id="test">blah</div>

Tests:

Vanilla JS ID test
document.querySelector('#test').classList.add('fuck');
Vanilla JS Class test
document.querySelector('.test').classList.add('fuck');
jQuery ID Test
$('#test').addClass('fuck');
jQuery Class Test
$('.test').addClass('fuck');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS ID test
Vanilla JS Class test
jQuery ID Test
jQuery Class Test

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Vanilla JS ID test	4825274.0 Ops/sec
Vanilla JS Class test	5216172.5 Ops/sec
jQuery ID Test	2209066.8 Ops/sec
jQuery Class Test	1354631.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark compares the execution performance of vanilla JavaScript (Vanilla JS) and jQuery in various scenarios.

**Benchmark Definition JSON**

The `Script Preparation Code` specifies that jQuery 3.6.0 is included in the HTML file, while the `Html Preparation Code` sets up two identical elements with classes and IDs for testing.

**Individual Test Cases**

Each test case defines a different scenario to compare Vanilla JS and jQuery:

1. **Vanilla JS ID test**: Verifies if jQuery's `document.querySelector('#test')` can add a class (`'fuck'`) to an element identified by its ID.
2. **Vanilla JS Class test**: Checks if jQuery's `document.querySelector('.test')` can add a class (`'fuck'`) to an element identified by its class name.
3. **jQuery ID Test**: Verifies if Vanilla JS's equivalent `document.querySelector('#test')` can add a class (`'fuck'`) to an element identified by its ID (in this case, jQuery is forced into Vanilla JS mode).
4. **jQuery Class Test**: Similar to the previous test, but with a class name instead of an ID.

**Options Compared**

The main options being compared are:

* Using jQuery's `document.querySelector()` method
* Using vanilla JavaScript's equivalent methods (`document.getElementById()`, `document.getElementsByClassName()`)

Related benchmarks:

jQuery 3.6.0 vs Vanilla JS (version: 0)

Comparing performance of: Vanilla JS ID test vs Vanilla JS Class test vs jQuery ID Test vs jQuery Class Test

Created: 4 years ago by: Guest

Jump to the latest result

Vanilla JS ID test

Vanilla JS Class test

jQuery ID Test

jQuery Class Test

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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