Benchmark: jQuery :visible vs Javascript : find visible element

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="grouping" class="tabs-panel is-active active" role="tabpanel" aria-labelledby="grouping-tab">
    <div class="wide column">
<table class="unstriped custom-card-style grouping-products products productsTable" style="display: none;">
  <thead>
    <tr>
      <th width="78">
        <a id="select_all" href="#">All</a>
        <a id="select_none" href="#">None</a>
      </th>
      <th colspan="4">
        Product
      </th>
    </tr>
  </thead>


    <tbody id="product_43350635">
      <tr class="is-first">
          <td rowspan="3" class="has-bottom-solid-border with-toggler table-checkbox large">
          </td>
        <td colspan="4" class="classification">
        </td>
      </tr>

      <tr class="is-main product " data-id="43350635" data-price="5.9" data-shop="2612" data-image-url="//a.scdn.gr/images/products/043350/43350635/large_20190319152147_0a9a8ac2.jpeg" data-datamart_connect_url="">

        <td rowspan="2" class="image text-center zoomable-container">
        </td>

        <td class="vertical-top">

        </td>

        <td class="text-center no-wrap">
     
        </td>
      </tr>

      <tr class="is-last">
        <td class="vertical-bottom text-right">
         

        </td>
        <td class="vertical-bottom text-center availability_label">
        
        </td>
      </tr>
    </tbody>
</table>
      <table class="unstriped custom-card-style grouping-products products productsTable">
  <thead>
    <tr>
      <th width="78">
        <a id="select_all" href="#">All</a>
        <a id="select_none" href="#">None</a>
      </th>
      <th colspan="4">
        Product
      </th>
    </tr>
  </thead>


    <tbody id="product_43350635">
      <tr class="is-first">
          <td rowspan="3" class="has-bottom-solid-border with-toggler table-checkbox large">
          </td>
        <td colspan="4" class="classification">
        </td>
      </tr>

      <tr class="is-main product " data-id="43350635" data-price="5.9" data-shop="2612" data-image-url="//a.scdn.gr/images/products/043350/43350635/large_20190319152147_0a9a8ac2.jpeg" data-datamart_connect_url="">

        <td rowspan="2" class="image text-center zoomable-container">
        </td>

        <td class="vertical-top">

        </td>

        <td class="text-center no-wrap">
     
        </td>
      </tr>

      <tr class="is-last">
        <td class="vertical-bottom text-right">
         

        </td>
        <td class="vertical-bottom text-center availability_label">
        
        </td>
      </tr>
    </tbody>
</table>
      <table class="unstriped custom-card-style grouping-products products productsTable"  style="display: none;">
  <thead>
    <tr>
      <th width="78">
        <a id="select_all" href="#">All</a>
        <a id="select_none" href="#">None</a>
      </th>
      <th colspan="4">
        Product
      </th>
    </tr>
  </thead>


    <tbody id="product_43350635">
      <tr class="is-first">
          <td rowspan="3" class="has-bottom-solid-border with-toggler table-checkbox large">
          </td>
        <td colspan="4" class="classification">
        </td>
      </tr>

      <tr class="is-main product " data-id="43350635" data-price="5.9" data-shop="2612" data-image-url="//a.scdn.gr/images/products/043350/43350635/large_20190319152147_0a9a8ac2.jpeg" data-datamart_connect_url="">

        <td rowspan="2" class="image text-center zoomable-container">
        </td>

        <td class="vertical-top">

        </td>

        <td class="text-center no-wrap">
     
        </td>
      </tr>

      <tr class="is-last">
        <td class="vertical-bottom text-right">
         

        </td>
        <td class="vertical-bottom text-center availability_label">
        
        </td>
      </tr>
    </tbody>
</table>
    </div>
  </div>

Tests:

Javascript loop through elements
/*let productTables = document.querySelectorAll('.productsTable'); productTables.forEach((table) => { const elementStyle = window.getComputedStyle(table); if (!((elementStyle.display === 'none') || (elementStyle.visibility === 'hidden'))) return table; }); */ let productTables = document.querySelectorAll('.productsTable'); const isVisible = function(element) { const element2 = $(element); return !(/none/i.test(element2.css('display'))) && !(/hidden/i.test(element2.css('visibility'))); } productTables.forEach((table) => { if (isVisible(table)) return table; });
jQuery find visible element
productTables = $('.productsTable:visible');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Javascript loop through elements
jQuery find visible element

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark is designed to compare the performance of two methods: using JavaScript to loop through elements and using jQuery to select only visible elements.

**Individual Test Cases**

There are two test cases:

1. **"Javascript loop through elements"`**: This test case uses a JavaScript function to loop through all `.productsTable` elements on the page. The function checks if each element's `display` property is not set to `'none'` or its `visibility` property is not set to `'hidden'`. If an element passes this check, it is included in the result.
2. **"jQuery find visible element"`**: This test case uses jQuery to select all `.productsTable` elements that are currently visible on the page.

**Latest Benchmark Result**

The latest benchmark results show two browsers running each test case:

1. **"Javascript loop through elements"`**
	* Chrome 72: 59861 executions per second
	* Another browser (not specified): 23834 executions per second
2. **"jQuery find visible element"`**
	* Chrome 72: 23834 executions per second
	* Another browser (not specified): Not shown

**Performance Comparison**

The results suggest that:

* The JavaScript approach is significantly faster than the jQuery approach, with a factor of approximately 2.5-3 times slower.
* Both approaches are relatively fast, but the JavaScript implementation is more efficient.

**Why is jQuery slower?**

There are several possible reasons why jQuery might be slower in this case:

* jQuery's selector engine has to evaluate the `:visible` pseudo-class, which can add overhead due to CSS calculations and DOM traversals.
* jQuery's `find()` method may not be optimized for performance, especially when dealing with a large number of elements.
* The JavaScript implementation uses a more straightforward approach that avoids unnecessary DOM manipulations or overhead from external libraries.

Keep in mind that these are general observations and might not hold true for all scenarios. The actual performance difference between these two approaches depends on various factors, such as the specific use case, browser, and hardware configuration.

Related benchmarks:

jQuery :visible vs Javascript : find visible element (version: 4)

Comparing performance of: Javascript loop through elements vs jQuery find visible element

Created: 7 years ago by: Registered User

Jump to the latest result

Javascript loop through elements

jQuery find visible element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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