Benchmark: querySelectorAll data attribute vs class name vs custom HTML tag

HTML Preparation code:

<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>
<x-div class="test" data-attribute="test"></x-div>

Tests:

Data attribute
var test = document.querySelectorAll('[data-attribute="test"]');
Class name
var test = document.querySelectorAll('.test');
Custom HTML tag
var test = document.querySelectorAll('x-div');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Data attribute
Class name
Custom HTML tag

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Data attribute	2920224.0 Ops/sec
Class name	3414596.0 Ops/sec
Custom HTML tag	3518398.2 Ops/sec

Related benchmarks:

querySelectorAll data attribute vs class name vs custom HTML tag (version: 1)

Comparing performance of: Data attribute vs Class name vs Custom HTML tag

Created: one year ago by: Guest

Jump to the latest result

Data attribute

Class name

Custom HTML tag

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A