Benchmark: JQuery: find vs selector vs scoped selector - More Html

HTML Preparation code:

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

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

Script Preparation code:

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

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

Tests:

find with "find"
$element.find("#child");
$element.find("#child");
find with selector and scope
$("#child", $element);
$("#child", $element);
find with selector
$("#child");
$("#child");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
find with "find"
find with selector and scope
find with selector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 25 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
find with "find"	3962206.8 Ops/sec
find with selector and scope	3047806.8 Ops/sec
find with selector	10125758.0 Ops/sec

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

I'll explain what's being tested in the provided JSON.

The benchmark is testing three different ways to select an element on a web page using jQuery:

find() method: This method searches for an element with the specified ID within the current set of elements (the $element variable, which refers to the parent container). The benchmark compares the performance of this method.
Selector notation: This method uses a string to specify the selector for the desired element. In this case, it's #child, which targets an element with the ID child.
Scoped selector notation: This method is similar to the previous one but includes the $element variable as part of the scope, like so: $("#child", $element). This allows the search to occur within a specific context (in this case, the $element variable).

Now, let's discuss the pros and cons of each approach:

find() method:
- Pros: Can be used when you don't know the ID of the element beforehand.
- Cons: May be slower due to the overhead of searching within the current set of elements.
Selector notation:
- Pros: Fast and efficient, especially when targeting specific IDs or classes.
- Cons: Requires knowledge of the HTML structure and CSS selectors.
Scoped selector notation:
- Pros: Can provide better performance by limiting the search scope to a specific context.
- Cons: May require more setup and planning, as you need to specify both the selector and the scope.

In this benchmark, the test cases are:

find with "find"
find with selector and scope
find with selector

The latest benchmark results show that the scoped selector notation performs the best (faster), followed by the selector notation, and then the find() method. This is likely due to the optimized implementation of the scoped selector notation in jQuery.

As for other details, the benchmark is run on a Chrome 102 browser on a Windows desktop with a high number of executions per second (around 1.5 million).

LLMs can make mistakes. Check important info.

I'll explain what's being tested in the provided JSON.

The benchmark is testing three different ways to select an element on a web page using jQuery:

1. **find() method**: This method searches for an element with the specified ID within the current set of elements (the `$element` variable, which refers to the parent container). The benchmark compares the performance of this method.
2. **Selector notation**: This method uses a string to specify the selector for the desired element. In this case, it's `#child`, which targets an element with the ID `child`.
3. **Scoped selector notation**: This method is similar to the previous one but includes the `$element` variable as part of the scope, like so: `$("#child", $element)`. This allows the search to occur within a specific context (in this case, the `$element` variable).

Now, let's discuss the pros and cons of each approach:

* **find() method**:
	+ Pros: Can be used when you don't know the ID of the element beforehand.
	+ Cons: May be slower due to the overhead of searching within the current set of elements.
* **Selector notation**:
	+ Pros: Fast and efficient, especially when targeting specific IDs or classes.
	+ Cons: Requires knowledge of the HTML structure and CSS selectors.
* **Scoped selector notation**:
	+ Pros: Can provide better performance by limiting the search scope to a specific context.
	+ Cons: May require more setup and planning, as you need to specify both the selector and the scope.

In this benchmark, the test cases are:

* find with "find"
* find with selector and scope
* find with selector

The latest benchmark results show that the **scoped selector notation** performs the best (faster), followed by the **selector notation**, and then the **find() method**. This is likely due to the optimized implementation of the scoped selector notation in jQuery.

As for other details, the benchmark is run on a Chrome 102 browser on a Windows desktop with a high number of executions per second (around 1.5 million).

Related benchmarks:

JQuery: find vs selector vs scoped selector - More Html (version: 0)

Test which solution find quicker element

Comparing performance of: find with "find" vs find with selector and scope vs find with selector

Created: 2 years ago by: Guest

Jump to the latest result

find with "find"

find with selector and scope

find with selector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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