Benchmark: JQuery: find vs selector vs scoped selector - Attr

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 class="parent" >
  <div><div><div></div><div><div><div></div><div><div><div>
    <span data-pew="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("[data-pew='child']");
find with selector and scope
$("[data-pew='child']", $element);
find with selector
$("[data-pew='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

Autogenerated LLM Sumamry (model llama3.2:3b, generated 11 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition JSON**

The provided JSON represents a benchmark test for comparing the performance of three different approaches to find an element in a DOM:

1. `find` method
2. `selector` (CSS selector) with scope
3. `scoped selector` ( CSS selector with attribute)

The HTML structure is a nested hierarchy of `<div>` elements, including one containing another `<div>` with a `span` element that has an attribute `data-pew="child"`.

**Benchmark Preparation Code**

The script preparation code creates a jQuery object `$element` by selecting all elements with the class `parent`.

**Individual Test Cases**

There are three test cases:

1. **find with "find"**: This test case uses the `find` method to search for an element within the scope of `$element`.
2. **find with selector and scope**: This test case uses a CSS selector (`[data-pew='child']`) with scope (the ` jQuery object `$element)` to search for the element.
3. **find with selector**: This test case uses only a CSS selector (`[data-pew='child']`) without specifying scope.

**Performance Comparison**

The benchmark results show that:

* The `find` method is the fastest, with an average of 722,063 executions per second.
* The `selector` with scope (test case 2) is slower than the `find` method but faster than the `scoped selector`.
* The `scoped selector` is the slowest, with an average of 245,960 executions per second.

**Pros and Cons**

Here's a brief summary of each approach:

* **Find**: Fastest, as it only requires traversing the DOM to find the element. However, it may not be efficient if the element is deeply nested.
* **Selector with scope**: Faster than `scoped selector`, but slower than `find`. This approach allows for more flexibility in selecting elements.
* **Scoped selector**: Slowest, as it must consider the scope of the jQuery object and potentially traverse the DOM more.

**Best Practices**

Based on these results, if you need to find an element within a specific scope, using a CSS selector with scope (test case 2) might be a good compromise between speed and flexibility. If you only need to find an element without considering scope, the `find` method is likely the best choice.

Keep in mind that these results are specific to this benchmark test and may not generalize to all use cases. Always consider your specific requirements and DOM structure when choosing an approach for finding elements in JavaScript.

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/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
find with "find"	722063.9 Ops/sec
find with selector and scope	623786.6 Ops/sec
find with selector	245960.7 Ops/sec

Related benchmarks:

JQuery: find vs selector vs scoped selector - Attr (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 Sumamry (model llama3.2:3b, generated 11 days ago):