Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=596074" width="100%" height="500px"></iframe>
Custom HTML tag
3.5M/s
Class name
3.4M/s
Data attribute
2.9M/s
View exact numbers
Test name
Executions per second
✓
Custom HTML tag
3,518,398 Ops/sec
Class name
3,414,596 Ops/sec
Data attribute
2,920,224 Ops/sec
Related benchmarks
querySelectorAll data attribute vs class name
querySelectorAll data attribute without value consideration vs class name
querySelectorAll data attribute vs class name vs combined
querySelectorAll data attribute vs class name need
querySelectorAll data attribute vs class name vs combined [2]
querySelectorAll data attribute vs class name vs combined - another
Comments
Confirm delete:
Do you really want to delete benchmark?