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>

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

LLMs can make mistakes. Check important info.

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:

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**

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**

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