Benchmark: jQuery 3.3.1 selector vs jQuery 2.1.4 vs document.querySelector vs document.getElementById

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script type="text/javascript">
  var jq331 = $.noConflict(true);
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>
<script type="text/javascript">
  var jq214 = $.noConflict(true);
</script>
<div id="testElement"></div>

Tests:

jQuery 3.3.1
var el = jq331("#testElement")[0]; var className = el.className;
jQuery 2.1.4
var el = jq214("#testElement")[0]; var className = el.className;
Vanilla JS querySelector
var el = document.querySelector('#testElement'); var className = el.className;
Vanilla JS getElementById
var el = document.getElementById('testElement'); var className = el.className;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery 3.3.1
jQuery 2.1.4
Vanilla JS querySelector
Vanilla JS getElementById

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Vanilla JS getElementById

15.2M/s

Vanilla JS querySelector

2.7M/s

jQuery 3.3.1

2.5M/s

jQuery 2.1.4

2.2M/s

View exact numbers

Test name	Executions per second
✓ Vanilla JS getElementById	15,243,521 Ops/sec
Vanilla JS querySelector	2,685,071 Ops/sec
jQuery 3.3.1	2,504,472 Ops/sec
jQuery 2.1.4	2,203,487 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!

The provided JSON represents a benchmark test for comparing the performance of four different methods to retrieve an HTML element and its class name:

1.  **jQuery 3.3.1 selector**: This method uses jQuery's `$.fn` API to select an element based on its ID.
2.  **jQuery 2.1.4**: Similar to the previous one, but uses an older version of jQuery.
3.  **Vanilla JS querySelector**: This method uses the built-in `querySelector` function provided by modern web browsers (specifically, those that support CSS selectors).
4.  **Vanilla JS getElementById**: This method uses the `getElementById` function to retrieve an element based on its ID.

**Options Comparison:**

The four options are compared in terms of their execution speed, measured in executions per second (EPS). The benchmark result shows the EPS for each option:

*   Vanilla JS querySelector and getElementById outperform jQuery versions by a significant margin.
*   jQuery 3.3.1 selector is slightly faster than jQuery 2.1.4.

**Pros and Cons:**

Here's a brief overview of the pros and cons for each approach:

*   **jQuery**: Pros:
    *   Easy to use, especially for those familiar with the library.
    *   Provides additional functionality beyond basic DOM manipulation.
    Cons:
    *   Adds overhead due to the library's existence.
    *   May not be suitable for projects requiring optimal performance.
*   **Vanilla JS querySelector** and **getElementById**: Pros:
    *   Fast, lightweight, and optimized for modern browsers.
    Cons:
    *   Requires a compatible browser (modern web browsers support CSS selectors).
    *   Can be less intuitive for developers without prior experience.

**Library:**

The `$.noConflict(true)` calls are used to mitigate issues with multiple jQuery versions running simultaneously. This allows the benchmark to use different versions of jQuery while minimizing potential conflicts.

**Special JS Feature or Syntax:**

None of the options in this benchmark rely on any special JavaScript features or syntax beyond what is supported by modern browsers.

**Other Alternatives:**

If you need alternative methods for retrieving an element and its class name, consider:

*   **Vanilla JS queryByName**: Instead of using `querySelector` or `getElementById`, use `querySelectorByClassName`. However, this method has a slightly higher overhead due to the additional function call.
*   **Vanilla JS queryAll**: Use `document.querySelectorAll` to retrieve all elements with a specific class name. This approach can be more suitable for projects requiring optimal performance but may return an array of elements instead of a single one.

Keep in mind that the choice of method ultimately depends on your project's requirements, your team's expertise, and your personal preference.

jQuery 3.3.1 selector vs jQuery 2.1.4 vs document.querySelector vs document.getElementById (version: 0)

Comparing speed of jQuery 3.3.1 selector, jQuery 2.1.4, vanilla JS querySelector, and vanilla JS getElementById

Comparing performance of: `jQuery 3.3.1 vs jQuery 2.1.4 vs Vanilla JS querySelector vs Vanilla JS getElementById`

Created: 8 years ago by: Guest

Go to the latest result

jQuery 3.3.1

jQuery 2.1.4

Vanilla JS querySelector

Vanilla JS getElementById

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

jQuery 3.3.1 selector vs jQuery 2.1.4 vs document.querySelector vs document.getElementById (version: 0)

Comparing speed of jQuery 3.3.1 selector, jQuery 2.1.4, vanilla JS querySelector, and vanilla JS getElementById

Comparing performance of: jQuery 3.3.1 vs jQuery 2.1.4 vs Vanilla JS querySelector vs Vanilla JS getElementById

Created: 8 years ago by: Guest

Go to the latest result

jQuery 3.3.1

jQuery 2.1.4

Vanilla JS querySelector

Vanilla JS getElementById

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 3.3.1 vs jQuery 2.1.4 vs Vanilla JS querySelector vs Vanilla JS getElementById`