Run results for: ID vs Data vs Class 2

Run details:

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: Chrome 108

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: ID vs Data vs Class 2

ID

Data

class

ID vanilla

class vanilla

querySelector Attribute

querySelector ID

querySelector Class