Benchmark: Selector performance in JQuery 2

HTML Preparation code:

<div id="my-id">
    <div class="grand">
        <div class="parent"> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

AخA
 
<div id="my-id">
    <div class="grand">
        <div class="parent"> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc"); //case-1
$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc"); //case-2
$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc"); //case-3
$(' div#my-id div.my-class ').css("background-color", "#cccccc"); //case-4
$(' #my-id div.my-class ').css("background-color", "#cccccc"); //case-5
$(' #my-id .my-class ').css("background-color", "#cccccc"); //case-6
$(' div.my-class ').css("background-color", "#cccccc"); //case-7
$(' .my-class ').css("background-color", "#cccccc"); //case-8

 
$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc"); //case-1$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc"); //case-2$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc"); //case-3$(' div#my-id div.my-class ').css("background-color", "#cccccc"); //case-4$(' #my-id div.my-class ').css("background-color", "#cccccc"); //case-5$(' #my-id .my-class ').css("background-color", "#cccccc"); //case-6$(' div.my-class ').css("background-color", "#cccccc"); //case-7$(' .my-class ').css("background-color", "#cccccc"); //case-8

Tests:

case-1
$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc");
$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc");
case-2
$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc");
$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc");
case-3
$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc");
$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc");
case-4
$(' div#my-id div.my-class ').css("background-color", "#cccccc");
$(' div#my-id div.my-class ').css("background-color", "#cccccc");
case-5
$(' #my-id div.my-class ').css("background-color", "#cccccc");
$(' #my-id div.my-class ').css("background-color", "#cccccc");
case-6
$(' #my-id .my-class ').css("background-color", "#cccccc");
$(' #my-id .my-class ').css("background-color", "#cccccc");
case-7
$(' div.my-class ').css("background-color", "#cccccc");
$(' div.my-class ').css("background-color", "#cccccc");
case-8
$(' .my-class ').css("background-color", "#cccccc");
$(' .my-class ').css("background-color", "#cccccc");

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
case-1
case-2
case-3
case-4
case-5
case-6
case-7
case-8

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months 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

Test name	Executions per second
case-1	2066756.4 Ops/sec
case-2	2162077.0 Ops/sec
case-3	2204930.0 Ops/sec
case-4	971905.1 Ops/sec
case-5	968203.8 Ops/sec
case-6	990843.1 Ops/sec
case-7	1010453.2 Ops/sec
case-8	1026676.1 Ops/sec

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

Measuring the performance of JavaScript selectors can be a complex task, as it depends on various factors such as the browser, device platform, operating system, and even the specific hardware configuration.

Benchmark Definition

The provided benchmark measures the performance of different selector notation styles in jQuery 2. The script preparation code creates an HTML structure with multiple elements, each selected using a different notation style (e.g., div#my-id div.grand div.parent div.my-class, #my-id .grand .parent div.my-class, etc.). The benchmark then measures the execution time of setting the background color of these elements.

Options compared

The benchmark compares the performance of six different selector notation styles:

Direct: div#my-id div.grand div.parent div.my-class
ID-based: #my-id .grand .parent div.my-class
Class-based: .grand .parent div.my-class
Descendant: div#my-id div.my-class
Combinator: #my-id > div.grand .parent div.my-class (not used in this benchmark)
Attribute: [attr="class"] (not used in this benchmark)

Pros and Cons

Direct selector: Fastest, as it directly selects the element without any intermediate steps.
- Pros: Simple and efficient.
- Cons: May not be compatible with all browsers or devices.
ID-based selector: Fast, but may require additional overhead for ID lookup.
- Pros: Widely supported by modern browsers.
- Cons: Can be slower than direct selectors in some cases.
Class-based selector: Slowest, as it requires more steps to find the element.
- Pros: Easy to use and maintain, especially with CSS classes.
- Cons: May not be suitable for complex class hierarchies or large numbers of elements.

Browser-specific optimizations

The benchmark results suggest that Chrome 107 is consistently faster than other browsers (e.g., Firefox, Edge) across all selector notation styles. This might be due to Chrome's optimized JavaScript engine or specific browser-specific features like div#my-id being cached more efficiently.

Takeaways

Use direct selectors when possible for optimal performance.
Consider using ID-based selectors if compatibility is not a concern.
Avoid using class-based selectors unless absolutely necessary, as they can be slower and less efficient.
Be aware of browser-specific optimizations and potential differences in execution times between browsers.

Please note that these findings are specific to this particular benchmark and may not generalize to other use cases or scenarios.

LLMs can make mistakes. Check important info.

**Benchmark Definition**

The provided benchmark measures the performance of different selector notation styles in jQuery 2. The script preparation code creates an HTML structure with multiple elements, each selected using a different notation style (e.g., `div#my-id div.grand div.parent div.my-class`, `#my-id .grand .parent div.my-class`, etc.). The benchmark then measures the execution time of setting the background color of these elements.

**Options compared**

The benchmark compares the performance of six different selector notation styles:

1. **Direct**: `div#my-id div.grand div.parent div.my-class`
2. **ID-based**: `#my-id .grand .parent div.my-class`
3. **Class-based**: `.grand .parent div.my-class`
4. **Descendant**: `div#my-id div.my-class`
5. **Combinator**: `#my-id > div.grand .parent div.my-class` (not used in this benchmark)
6. **Attribute**: `[attr="class"]` (not used in this benchmark)

**Pros and Cons**

1. **Direct selector**: Fastest, as it directly selects the element without any intermediate steps.
	* Pros: Simple and efficient.
	* Cons: May not be compatible with all browsers or devices.
2. **ID-based selector**: Fast, but may require additional overhead for ID lookup.
	* Pros: Widely supported by modern browsers.
	* Cons: Can be slower than direct selectors in some cases.
3. **Class-based selector**: Slowest, as it requires more steps to find the element.
	* Pros: Easy to use and maintain, especially with CSS classes.
	* Cons: May not be suitable for complex class hierarchies or large numbers of elements.

**Browser-specific optimizations**

**Takeaways**

1. Use direct selectors when possible for optimal performance.
2. Consider using ID-based selectors if compatibility is not a concern.
3. Avoid using class-based selectors unless absolutely necessary, as they can be slower and less efficient.
4. Be aware of browser-specific optimizations and potential differences in execution times between browsers.

Please note that these findings are specific to this particular benchmark and may not generalize to other use cases or scenarios.

Related benchmarks:

Selector performance in JQuery 2 (version: 0)

Comparing performance of: case-1 vs case-2 vs case-3 vs case-4 vs case-5 vs case-6 vs case-7 vs case-8

Created: 6 years ago by: Guest

Jump to the latest result

case-1

case-2

case-3

case-4

case-5

case-6

case-7

case-8

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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