Benchmark: JQuery: find with id vs find with tag name vs global 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:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
within element find with tag selector
within element find with id
global find with id

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
within element find with tag selector	1188192.5 Ops/sec
within element find with id	1469970.5 Ops/sec
global find with id	1820122.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and what pros and cons of each approach are.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different ways to select an element using jQuery:

1. **Find within an element with a tag selector**: `$element.find("span");`
2. **Find within an element with an ID**: `$element.find("#child");`
3. **Find globally by ID**: `$( "#child" );`

**HTML Structure**

The HTML structure is as follows:
```html
<a id="parent">
  <span id="child">Need span</span>
  <svg class="icon md-16 icon-shevron-right text-muted"></svg>
</a>
```
This structure consists of an `<a>` element with an ID `parent`, which contains a `<span>` element with an ID `child`.

**Library: jQuery**

The benchmark uses the jQuery library, specifically version 3.4.1. jQuery is a JavaScript library that provides a convenient way to interact with HTML elements.

**JavaScript Code**

The JavaScript code is generated by MeasureThat.net and includes the following:
```javascript
var $element = $( "#parent" );
```
This line creates a jQuery object `$element` referencing the `<a>` element with ID `parent`.

**Test Cases**

There are three individual test cases:

1. **Within element find with tag selector**: `$element.find("span");`
2. **Within element find with ID**: `$element.find("#child");`
3. **Global find with ID**: `$( "#child" );`

Each test case uses the same HTML structure, but the way they select the `<span>` element differs.

**Performance Comparison**

The benchmark measures the performance of each test case by executing them repeatedly and reporting the number of executions per second (ExecutionsPerSecond).

Based on the latest benchmark result, we can see that:

* **Global find with ID**: Chrome 105 on Desktop, Windows, is the fastest, with approximately 1469970.5 executions per second.
* **Within element find with tag selector**: Chrome 105 on Desktop, Windows, is slower than global find with ID, with approximately 1188192.5 executions per second.
* **Within element find with ID**: Chrome 105 on Desktop, Windows, is even slower than the previous two, with approximately 1469970.5 executions per second.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Global find with ID**:
	* Pros: Fastest, as it uses a cached DOM element lookup.
	* Cons: Requires an explicit ID on the target element.
2. **Within element find with tag selector**:
	* Pros: Allows for more flexibility in selecting elements based on their tag name or class.
	* Cons: Can be slower due to the need to traverse the DOM tree.
3. **Within element find with ID**:
	* Pros: Similar performance characteristics to global find with ID, as it also uses a cached DOM element lookup.
	* Cons: Requires an explicit ID on the target element.

**Alternatives**

Other alternatives for selecting elements in jQuery include:

1. `$(element).filter(function() { ... })`: This method filters the elements based on a callback function.
2. `$(element).find("*")`: This method selects all descendants of the element, regardless of their tag name or class.
3. `$('[selector]')`: This method uses a CSS selector to select elements.

However, these alternatives may have different performance characteristics and use cases compared to the three methods being benchmarked.

Related benchmarks:

JQuery: find with id vs find with tag name vs global id selector (version: 0)

Test which solution find quicker element

Comparing performance of: within element find with tag selector vs within element find with id vs global find with id

Created: 2 years ago by: Guest

Jump to the latest result

within element find with tag selector

within element find with id

global find with id

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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