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

Test name	Executions per second
jQuery 3.3.1	2504471.5 Ops/sec
jQuery 2.1.4	2203487.2 Ops/sec
Vanilla JS querySelector	2685071.0 Ops/sec
Vanilla JS getElementById	15243521.0 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.

Related benchmarks:

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

Jump 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):