Benchmark: jQuery vs getElementById vs querySelector

HTML Preparation code:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div id="testElement" class="test class list classes"></div>

Tests:

jQuery
var el = $("#testElement")[0];
getElementById
var el = document.getElementById('testElement');
querySelector
var el = document.querySelector("#testElement");

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 55 runs

getElementById

10.2M/s

querySelector

4.5M/s

jQuery

2.9M/s

Fastest: getElementById (3.5x faster)

View exact numbers

✓ getElementById: 10,162,252 ops/sec
• querySelector: 4,501,988 ops/sec
• jQuery: 2,872,182 ops/sec

Firefox 25 runs

getElementById

7.0M/s

jQuery

5.6M/s

querySelector

3.4M/s

Fastest: getElementById (2.1x faster)

View exact numbers

✓ getElementById: 7,032,300 ops/sec
• jQuery: 5,629,394 ops/sec
• querySelector: 3,395,905 ops/sec

Mobile Results:

Chrome 5 runs

getElementById

5.3M/s

querySelector

3.0M/s

jQuery

2.1M/s

Fastest: getElementById (2.6x faster)

View exact numbers

✓ getElementById: 5,292,662 ops/sec
• querySelector: 2,968,300 ops/sec
• jQuery: 2,072,265 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
getElementById
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

getElementById

22.8M/s

querySelector

3.8M/s

jQuery

2.6M/s

View exact numbers

Test name	Executions per second
✓ getElementById	22,756,716 Ops/sec
querySelector	3,789,165 Ops/sec
jQuery	2,620,918 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 microbenchmarks.

**Benchmark Overview**

The provided benchmark compares the speed of getting an element by its ID using three approaches: jQuery, `document.getElementById()`, and `document.querySelector()`.

**Library and Purpose**

* jQuery is a popular JavaScript library that provides an easy-to-use API for DOM manipulation. In this benchmark, it's used to select elements based on their ID.
* The `document.getElementById()` method is a native JavaScript function that retrieves an element by its ID.
* The `document.querySelector()` method is also a native JavaScript function that retrieves an element based on a CSS selector.

**Options Compared**

The three options are compared in terms of their execution speed. Each test case measures how many times the code within the benchmark definition is executed per second (ExecutionsPerSecond).

**Pros and Cons of Different Approaches**

* **jQuery**: Pros:
	+ Easy to use, especially for developers familiar with jQuery.
	+ Can be faster than native methods due to its optimized implementation.
Cons:
	+ Adds an extra library dependency, which can increase the benchmark's overhead.
	+ May not perform as well on older browsers that don't support jQuery.
* **`document.getElementById()`**: Pros:
	+ Fast and lightweight, making it suitable for small scripts.
	+ Native JavaScript function, so no additional dependencies are required.
Cons:
	+ Requires more DOM traversal, which can be slower than direct ID-based selection.
	+ May not work as expected if the element is hidden or has a dynamic ID.
* **`document.querySelector()`**: Pros:
	+ Similar to `getElementById()`, but offers more flexibility with CSS selectors.
	+ Can be faster than `getElementById()` for elements that have multiple IDs.
Cons:
	+ May be slower than `getElementById()` due to the overhead of parsing CSS selectors.
	+ Less intuitive than `getElementById()` or jQuery.

**Other Considerations**

* **Browser support**: The benchmark results are specific to Chrome 129 on a Windows Desktop. Different browsers may behave differently, especially when it comes to caching and optimization.
* **HTML structure**: The provided HTML structure is simple and optimized for the test cases. In real-world scenarios, the DOM tree can be much more complex, affecting the performance of these methods.

**Alternatives**

Other alternatives for selecting elements by ID include:

* `document.querySelector('#testElement')`: This method uses a single # character instead of the dot notation.
* `element.ownerDocument.getElementById('testElement')`: This method retrieves an element from its parent document if it's not the same as the current window's document.

Keep in mind that while these alternatives exist, they might not offer significant performance differences compared to the native methods used in the benchmark.

jQuery vs getElementById vs querySelector (version: 1)

Comparing speed of getting element by id with jQuery vs Vanilla JS with getElementById and querySelector

Comparing performance of: `jQuery vs getElementById vs querySelector`

Created: 6 years ago by: Registered User

Go to the latest result

jQuery

getElementById

querySelector

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 55 runs

Firefox 25 runs

Mobile Results:

Chrome 5 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 vs getElementById vs querySelector (version: 1)

Comparing speed of getting element by id with jQuery vs Vanilla JS with getElementById and querySelector

Comparing performance of: jQuery vs getElementById vs querySelector

Created: 6 years ago by: Registered User

Go to the latest result

jQuery

getElementById

querySelector

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 55 runs

Firefox 25 runs

Mobile Results:

Chrome 5 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 vs getElementById vs querySelector`