Run results for: jQuery :visible vs Javascript : find visible element

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36

Browser: Chrome 73

Operating system: Linux

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
Javascript loop through elements	116473.5 Ops/sec
jQuery find visible element	28349.5 Ops/sec

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');

Run results for: jQuery :visible vs Javascript : find visible element

Javascript loop through elements

jQuery find visible element