Benchmark: querySelectorAll vs JQuery

querySelectorAll vs JQuery (version: 2) Benchmark.js

Compares the performance of querySelectorAll against JQuery for selecting elements. For class selector, getElementsByClassName is the best. For element selector, getElementsByTagName is the best.

Comparing performance of: `querySelectorAll by Attribute vs jQuery selector by Attribute vs querySelectorAll by Class vs jQuery selector by Class vs querySelectorAll by Element vs jQuery selector by Element`

Created: 8 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<content id="demo">Hello World!</content>

Script Preparation code:

let components = '';
for (let i=0; i<10000; i+=1) {
    components += '<div class="component" data-component="component' + i + '">Content ' + i + '</div>'
}
document.getElementById("demo").innerHTML = components;

Tests:

querySelectorAll by Attribute
let components = document.querySelectorAll('[data-component]');
jQuery selector by Attribute
let components = $('[data-component]');
querySelectorAll by Class
let components = document.querySelectorAll('.component');
jQuery selector by Class
let components = $('.component');
querySelectorAll by Element
let components = document.querySelectorAll('div');
jQuery selector by Element
let components = $('div');

Historical Performance Data aggregated from 59 community runs

Desktop Results:

Chrome 41 runs

querySelectorAll by Element

8K/s

querySelectorAll by Class

8K/s

querySelectorAll by Attribute

4K/s

jQuery selector by Element

1K/s

jQuery selector by Class

1K/s

jQuery selector by Attribute

1K/s

Fastest: querySelectorAll by Element (8.1x faster)

View exact numbers

✓ querySelectorAll by Element: 8,376 ops/sec
• querySelectorAll by Class: 7,718 ops/sec
• querySelectorAll by Attribute: 4,479 ops/sec
• jQuery selector by Element: 1,368 ops/sec
• jQuery selector by Class: 1,358 ops/sec
• jQuery selector by Attribute: 1,030 ops/sec

Firefox 18 runs

jQuery selector by Class

9K/s

jQuery selector by Element

6K/s

querySelectorAll by Class

6K/s

querySelectorAll by Element

6K/s

querySelectorAll by Attribute

6K/s

jQuery selector by Attribute

3K/s

Fastest: jQuery selector by Class (2.8x faster)

View exact numbers

✓ jQuery selector by Class: 9,073 ops/sec
• jQuery selector by Element: 6,379 ops/sec
• querySelectorAll by Class: 5,956 ops/sec
• querySelectorAll by Element: 5,908 ops/sec
• querySelectorAll by Attribute: 5,720 ops/sec
• jQuery selector by Attribute: 3,224 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
querySelectorAll by Attribute
jQuery selector by Attribute
querySelectorAll by Class
jQuery selector by Class
querySelectorAll by Element
jQuery selector by Element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

querySelectorAll by Element

7K/s

querySelectorAll by Class

6K/s

querySelectorAll by Attribute

4K/s

jQuery selector by Class

1K/s

jQuery selector by Element

1K/s

jQuery selector by Attribute

1K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll by Element	7,455 Ops/sec
querySelectorAll by Class	6,190 Ops/sec
querySelectorAll by Attribute	4,043 Ops/sec
jQuery selector by Class	1,470 Ops/sec
jQuery selector by Element	1,368 Ops/sec
jQuery selector by Attribute	1,134 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, library usage, special JS features or syntax, and alternatives.

**Benchmark Overview**

The provided benchmark compares the performance of two approaches: `querySelectorAll` (native JavaScript) and jQuery selectors (`$()`). The test creates a large HTML document with 10,000 elements and tests the performance of both approaches in selecting different types of elements (by attribute, class, and element).

**Options Compared**

1. **Native `querySelectorAll`**: This approach uses the native JavaScript method to select elements based on a CSS selector.
2. **jQuery selectors (`$()`)**: This approach uses jQuery's selector engine to select elements.

**Pros and Cons of Each Approach**

**Native `querySelectorAll`**:

Pros:

* Native implementation, which is generally faster than third-party libraries.
* More control over the selection process.

Cons:

* Requires a CSS-like syntax for selectors, which can be complex.
* Limited support for certain advanced CSS features (e.g., pseudo-classes).

**jQuery selectors (`$()`)**

Pros:

* Easier to read and write CSS-like selectors.
* Supports more advanced CSS features (e.g., pseudo-classes).
* More efficient in some cases due to jQuery's internal optimizations.

Cons:

* Third-party library, which adds overhead and may not be compatible with all browsers.
* Less control over the selection process.

**Library Usage**

In this benchmark, jQuery is used as the external library. The `script` tag includes the jQuery library, and the `$()` function is used to select elements.

**Special JS Features or Syntax**

None mentioned in this benchmark.

**Other Considerations**

When choosing between native `querySelectorAll` and jQuery selectors, consider the trade-off between ease of use (jQuery) and performance (native implementation). If you need more control over the selection process, native `querySelectorAll` might be a better choice. However, if readability and ease of use are more important, jQuery selectors could be a better option.

**Alternatives**

Other alternatives to compare include:

1. **Sizzle**: Another popular CSS selector engine that can be used in place of jQuery.
2. **CSSOM**: The Document Object Model (DOM) API provides a native way to select elements using CSS selectors.
3. **QuerySelector API**: A newer JavaScript API for selecting elements based on CSS selectors.

These alternatives might offer different performance profiles, ease of use, or feature sets compared to native `querySelectorAll` and jQuery selectors.

querySelectorAll vs JQuery (version: 2) Benchmark.js

Compares the performance of querySelectorAll against JQuery for selecting elements. For class selector, getElementsByClassName is the best. For element selector, getElementsByTagName is the best.

Comparing performance of: querySelectorAll by Attribute vs jQuery selector by Attribute vs querySelectorAll by Class vs jQuery selector by Class vs querySelectorAll by Element vs jQuery selector by Element

Created: 8 years ago by: Registered User

Go to the latest result

querySelectorAll by Attribute

jQuery selector by Attribute

querySelectorAll by Class

jQuery selector by Class

querySelectorAll by Element

jQuery selector by Element

Historical Performance Data aggregated from 59 community runs

Desktop Results:

Chrome 41 runs

Firefox 18 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: `querySelectorAll by Attribute vs jQuery selector by Attribute vs querySelectorAll by Class vs jQuery selector by Class vs querySelectorAll by Element vs jQuery selector by Element`