Benchmark: jQuery vs Vanilla JS Selectors 3.7.1

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script>
<div id="foo" class="bar" data-hook="test">Hello World</div>

Tests:

Pure JS ID Selector
var el = document.getElementById("foo"); console.log(el);
Pure JS Class Selector
var el = document.getElementsByClassName("bar"); console.log(el);
Pure JS Data Hook
var el = document.querySelectorAll('[data-hook~="test"]'); console.log(el);
jQuery ID Selector
console.log($("#foo"));
jQuery Class Selector
console.log($(".bar"));
jQuery Data Hook Selector
console.log($('[data-hook="test"]'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Pure JS ID Selector
Pure JS Class Selector
Pure JS Data Hook
jQuery ID Selector
jQuery Class Selector
jQuery Data Hook Selector

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark is comparing the performance of two approaches: jQuery and Vanilla JavaScript (Vanilla JS) selectors, specifically for three types of selectors:

1. ID selector
2. Class selector
3. Data Hook selector

**Options Compared**

* **jQuery**: Uses the jQuery library to select elements.
* **Vanilla JS**: Uses native JavaScript methods (e.g., `document.getElementById()`, `document.getElementsByClassName()`, and `document.querySelector()` with a CSS selector) to select elements.

**Pros and Cons of Each Approach**

**jQuery:**

Pros:

* Easier to use, especially for complex selectors
* Built-in features like chaining and event delegation
* Wide adoption and support

Cons:

* Additional JavaScript library overhead (approximately 28KB)
* Slower execution due to the additional library
* Less control over the underlying DOM manipulation

**Vanilla JS:**

Pros:

* Native performance and speed
* No additional library overhead
* More control over DOM manipulation

Cons:

* Steeper learning curve for complex selectors
* Fewer built-in features, requiring more code

**Other Considerations**

The benchmark also includes a special case: the `data-hook` attribute. This is a custom attribute added to HTML elements in recent versions of jQuery and some modern browsers.

In the benchmark, both approaches use this attribute as a selector. The pros of using `data-hook` include:

* Improved performance due to the increased specificity
* Simplified selectors for developers familiar with the attribute

However, there are also potential drawbacks:

* Increased reliance on custom attributes, which can be a security risk if not handled properly
* Incompatibility with older browsers or libraries that don't support `data-hook`

**Library: jQuery**

The jQuery library is a popular JavaScript library used for DOM manipulation and event handling. It provides an easy-to-use API for interacting with the DOM and has a wide range of features, including:

* Selectors (e.g., `$()` function)
* Event delegation
* Chaining
* Browser-specific quirks

**Special JS Feature/ Syntax: `data-hook`**

The `data-hook` attribute is a custom attribute introduced in recent versions of jQuery. It's used to attach metadata to HTML elements, making it easier to select and manipulate them.

In the benchmark, both approaches use this attribute as a selector. This allows for more efficient selection and manipulation of elements, especially when combined with modern CSS selectors like `[data-hook~="test"]`.

Now that we've explored what's being tested on MeasureThat.net, let's discuss alternative approaches to measuring JavaScript performance:

* Other benchmarking tools: e.g., jsperf.com, benchmark.js
* Alternative libraries or engines: e.g., React, Vue.js, WebKit
* Native Node.js benchmarks: e.g., BenchmarkJS, V8.js

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.1

View result in a separate tab

Test name	Executions per second
Pure JS ID Selector	1687635.5 Ops/sec
Pure JS Class Selector	1650560.8 Ops/sec
Pure JS Data Hook	1210550.1 Ops/sec
jQuery ID Selector	1477283.9 Ops/sec
jQuery Class Selector	1216392.0 Ops/sec
jQuery Data Hook Selector	1000530.5 Ops/sec

Related benchmarks:

jQuery vs Vanilla JS Selectors 3.7.1 (version: 0)

Comparing performance of: Pure JS ID Selector vs Pure JS Class Selector vs Pure JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector

Created: one year ago by: Guest

Jump to the latest result

Pure JS ID Selector

Pure JS Class Selector

Pure JS Data Hook

jQuery ID Selector

jQuery Class Selector

jQuery Data Hook Selector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):