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>

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: one year 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 one year ago):

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: 3 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>

Fastest: N/A

Slowest: N/A

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