Benchmark: JQuery: find vs id selector

HTML Preparation code:

<a id="parent" >
  <span id="child">Need span</span>
  <svg class="icon md-16 icon-shevron-right text-muted"></svg>
</a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

Script Preparation code:

var $element = $("#parent");

Tests:

find with tag selector
$element.find("span");
find with id
$("#child");

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

find with id

2.8M/s

find with tag selector

1.4M/s

Fastest: find with id (2.1x faster)

View exact numbers

✓ find with id: 2,794,315 ops/sec
• find with tag selector: 1,351,686 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
find with tag selector
find with id

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

find with id

2.6M/s

find with tag selector

1.1M/s

View exact numbers

Test name	Executions per second
✓ find with id	2,597,409 Ops/sec
find with tag selector	1,147,701 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the provided benchmark and its options.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches for selecting elements in a jQuery document: using an ID selector (`#id`) versus a tag selector (`tag`). The goal is to determine which approach is faster.

**Script Preparation Code**

Before running the benchmark, the script preparation code sets up a jQuery object `$element` that references an HTML element with the ID `parent`. This setup ensures that both test cases access the same DOM node.

**Html Preparation Code**

The HTML preparation code includes two elements: one with the ID `parent`, which will be used as the reference point, and another `span` element inside it, which will serve as the target for selection. The script also includes the jQuery library from a CDN.

**Benchmark Options**

There are two benchmark options being compared:

1. **`$element.find("span")`**: This option uses a tag selector to find all elements with the name "span" within the `$element`. Since the `span` element is nested inside the `$element`, this approach might be slower because jQuery needs to traverse the DOM tree.
2. **`$("#child")`**: This option uses an ID selector to directly select the `#child` element, which is a descendant of the `$element`.

**Pros and Cons of Each Approach**

1. **`$element.find("span")`**:
	* Pros: More flexible for selecting multiple elements with the same tag name.
	* Cons: May be slower due to DOM traversal.
2. **`$("#child")`**:
	* Pros: Faster since it directly selects a single element by ID.
	* Cons: Less flexible if you need to select multiple elements with the same ID.

**Library and Its Purpose**

The `jQuery` library is used for its DOM manipulation and selection capabilities. In this benchmark, jQuery's selector engine is used to find the elements.

**Special JS Feature or Syntax (None)**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Alternatives**

If you wanted to write a similar benchmark, you could also consider using other libraries or frameworks for DOM manipulation and selection. For example:

* `VanillaJS` : You can use vanilla JavaScript methods like `document.querySelector`, `document.querySelectorAll`, or `getElementsByClassName`.
* `React` or `Angular`: These frameworks provide their own set of APIs for selecting and manipulating elements in the DOM.

Keep in mind that each framework has its own strengths and weaknesses, and the performance characteristics may vary depending on the specific use case and implementation details.

JQuery: find vs id selector (version: 0)

Test which solution find quicker element

Comparing performance of: `find with tag selector vs find with id`

Created: 6 years ago by: Guest

Go to the latest result

find with tag selector

find with id

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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: find vs id selector (version: 0)

Test which solution find quicker element

Comparing performance of: find with tag selector vs find with id

Created: 6 years ago by: Guest

Go to the latest result

find with tag selector

find with id

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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: `find with tag selector vs find with id`