Benchmark: ID vs Data vs Class 2

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
<div id="test" data-test="test" class="testing">Testing</div>

Tests:

ID
$('#test').show();
Data
$('[data-test="test"]').show();
class
$('.testing').show();
ID vanilla
document.getElementById("test");
class vanilla
document.getElementsByClassName("testing");
querySelector Attribute
document.querySelector('[data-test="test"]');
querySelector ID
document.querySelector('test');
querySelector Class
document.querySelector('.testing');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID
Data
class
ID vanilla
class vanilla
querySelector Attribute
querySelector ID
querySelector Class

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
ID	357051.5 Ops/sec
Data	205567.5 Ops/sec
class	260553.1 Ops/sec
ID vanilla	4634798.0 Ops/sec
class vanilla	4284235.0 Ops/sec
querySelector Attribute	2123357.0 Ops/sec
querySelector ID	2712900.0 Ops/sec
querySelector Class	3134351.0 Ops/sec

ID vs Data vs Class 2 (version: 0)

Comparing performance of: ID vs Data vs class vs ID vanilla vs class vanilla vs querySelector Attribute vs querySelector ID vs querySelector Class

Created: one year ago by: Guest

Jump to the latest result

ID

Data

class

ID vanilla

class vanilla

querySelector Attribute

querySelector ID

querySelector Class

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A