Run results for: Class vs Attribute selector erhuan

Run details:

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

Browser: Chrome 108

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Class selector	62465.8 Ops/sec
Attribute selector	37368.3 Ops/sec

HTML Preparation code:

<input type="text" class="search" data-search-input/>
<div class="results" data-results>
  <div class="element" data-result-element>Hello</div>
  <div class="element" data-result-element>World</div>
  <div class="element" data-result-element>Everyone</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

Class selector
let list = $('.results'); let list_item = list.find('.element'); let input = $('.search'); let filter = input.val().toUpperCase(); list_item.each((index, element)=> { $(element).toggle($(element).html().toUpperCase().indexOf(filter) > -1); });
Attribute selector
let list = $('[class="results"]'); let list_item = list.find('[class="element"]'); let input = $('[class="search"]'); let filter = input.val().toUpperCase(); list_item.each((index, element)=> { $(element).toggle($(element).html().toUpperCase().indexOf(filter) > -1); });

Run results for: Class vs Attribute selector erhuan

Class selector

Attribute selector