Benchmark: JQuery: selector vs filter vs filter+filter

HTML Preparation code:

<table class="table table-striped" id="node_tableEdge">
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1194154">aaa</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1194154" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494108">bbb</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494108" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494111">ccc</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494111" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494112">ddd</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494112" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494113">eee</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494113" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494114">fff</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494114" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494115">ggg</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494115" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494116">hhh</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494116" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494117">iii</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494117" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494118">jjj</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494118" data-edge-type-id="2"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1194154">aaa</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1194154" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494108">bbb</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494108" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494111">ccc</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494111" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494112">ddd</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494112" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494113">eee</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494113" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494114">fff</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494114" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494115">ggg</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494115" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494116">hhh</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494116" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494117">iii</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494117" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
  <tr>
    <td class="node_rowEdgeType">broader</td><td class="node_rowEdgeToUriLabel" title="kb:1494118">jjj</td><td class="tableColLast text-center"><a href="#" class="node_rowEdgeDel" title="Elimina" data-to-uri="kb:1494118" data-edge-type-id="1"><i class="fa fa-trash"></i></a></td>
  </tr>
</table>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js'></script>

Tests:

SELECTOR + FILTER
$('.node_rowEdgeDel').filter('[data-to-uri="kb:1194154"][data-edge-type-id="2"]')
SELECTOR + FILTER + FILTER
$('.node_rowEdgeDel').filter('[data-to-uri="kb:1194154"]').filter('[data-edge-type-id="2"]')
SELECTOR only
$('.node_rowEdgeDel[data-to-uri="kb:1194154"][data-edge-type-id="2"]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
SELECTOR + FILTER
SELECTOR + FILTER + FILTER
SELECTOR only

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):

LLMs can make mistakes. Check important info.

The benchmark titled **"JQuery: selector vs filter vs filter+filter"** is designed to measure the performance of different methods for selecting specific elements in a DOM using jQuery. The benchmarks focus on how many times each method can be executed per second under the same conditions.

### Test Cases and Comparison:

1. **SELECTOR only**
   - **Benchmark Definition:** `$('.node_rowEdgeDel[data-to-uri="kb:1194154"][data-edge-type-id="2"]')`
   - This method uses a jQuery selector that combines the class name with two attribute selectors in a single call. It is the most concise and leverages jQuery's optimization for parsing the selector.

2. **SELECTOR + FILTER**
   - **Benchmark Definition:** `$('.node_rowEdgeDel').filter('[data-to-uri="kb:1194154"][data-edge-type-id="2"]')`
   - This method first selects all elements with the class `node_rowEdgeDel`, and then filters these elements based on the attribute conditions. This two-step process typically involves a larger initial set of results and then a filter operation, which can be less efficient.

3. **SELECTOR + FILTER + FILTER**
   - **Benchmark Definition:** `$('.node_rowEdgeDel').filter('[data-to-uri="kb:1194154"]').filter('[data-edge-type-id="2"]')`
   - Like the previous method, this one also selects all elements matching the class and filters them in two stages. Its performance might be further degraded compared to the single filter operation due to the compounded nature of two successive filter calls.

### Results Overview:

- **Executions per Second:**
  - **Selector only:** 379,415.19
  - **Selector + Filter:** 132,428.89
  - **Selector + Filter + Filter:** 127,845.43

The results clearly indicate that using a **single selector** is the most efficient and gives the best performance. The two approaches that involve filtering after the initial selection are significantly slower, demonstrating that each additional operation adds overhead.

### Pros and Cons of Different Approaches:

- **Selector only:**
  - **Pros:** Best performance; concise; less code to maintain.
  - **Cons:**  Limited flexibility if conditions need to be modified separately.

- **Selector + Filter:**
  - **Pros:** Clear separation of concerns; both selectors can be independently modified.
  - **Cons:** Lower performance due to having to sift through a larger initial set before applying filter criteria.

- **Selector + Filter + Filter:**
  - **Pros:** Maximum flexibility in applying complex criteria.
  - **Cons:** Poor performance compared to the other methods due to repeated filtering and complexity in chaining.

### Other Considerations:

1. **jQuery Library:**
   - This benchmark makes use of **jQuery**, a popular JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Its selector engine is central to its functionality and is often optimized, but the performance can vary based on how selectors are combined.

2. **Browser Variations:**
   - The performance of these selections might differ across browsers due to how jQuery or the underlying engines (like V8 in Chrome) implement and optimize their selectors.

3. **Use Cases for Alternatives:**
   - For very heavy DOM manipulation tasks or if newer JavaScript features can be leveraged, one might consider using vanilla JavaScript (`document.querySelector()` or `document.querySelectorAll()`) instead, especially in modern web applications that require high performance and less overhead.

In summary, for optimizing DOM element selection, **using compound selectors** is preferred for performance, whereas **filter methods** can offer flexibility at the cost of speed. This benchmark provides valuable insight into the optimizations and trade-offs necessary for efficient JavaScript coding practices.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
SELECTOR + FILTER	132428.9 Ops/sec
SELECTOR + FILTER + FILTER	127845.4 Ops/sec
SELECTOR only	379415.2 Ops/sec

Related benchmarks:

JQuery: selector vs filter vs filter+filter (version: 1)

find the best solution for optimize getting selected option

Comparing performance of: SELECTOR + FILTER vs SELECTOR + FILTER + FILTER vs SELECTOR only

Created: 9 days ago by: Guest

Jump to the latest result

SELECTOR + FILTER

SELECTOR + FILTER + FILTER

SELECTOR only

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 days ago):