Benchmark: id vs class vs dataset

id vs class vs dataset (version: 1) Benchmark.js

getElementById, getElementsByClassName, querySelector, querySelectorAll

Comparing performance of: `getElementById vs getElementsByClassName vs querySelector(ID) vs querySelector(class) vs querySelectorAll(ID) vs querySelectorAll(class) vs querySelector(data-set) vs querySelectorAll(data-set)`

Created: 7 months ago by: Guest

Go to the latest result

HTML Preparation code:

<div id="helloid" class="hello-class" data-element="hello">hello</div>

Tests:

getElementById
var el = document.getElementById("helloid") var className = el.className;
getElementsByClassName
var el = document.getElementsByClassName("hello-class") var className = el.className;
querySelector(ID)
var el = document.querySelector("#helloid") var className = el.className;
querySelector(class)
var el = document.querySelector(".hello-class") var className = el.className;
querySelectorAll(ID)
var el = document.querySelectorAll("#helloid") var className = el[0].className;
querySelectorAll(class)
var el = document.querySelectorAll(".hello-class") var className = el[0].className;
querySelector(data-set)
var el = document.querySelector('[data-element="hello"]') var className = el.dataset.element;
querySelectorAll(data-set)
var el = document.querySelectorAll('[data-element="hello"]') var className = el[0].dataset.element;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByClassName
querySelector(ID)
querySelector(class)
querySelectorAll(ID)
querySelectorAll(class)
querySelector(data-set)
querySelectorAll(data-set)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

getElementById

37.1M/s

querySelector(class)

23.5M/s

getElementsByClassName

20.8M/s

querySelector(ID)

9.1M/s

querySelector(data-set)

8.7M/s

querySelectorAll(class)

8.1M/s

querySelectorAll(data-set)

4.9M/s

querySelectorAll(ID)

4.3M/s

View exact numbers

Test name	Executions per second
✓ getElementById	37,062,752 Ops/sec
querySelector(class)	23,501,416 Ops/sec
getElementsByClassName	20,782,798 Ops/sec
querySelector(ID)	9,105,972 Ops/sec
querySelector(data-set)	8,727,933 Ops/sec
querySelectorAll(class)	8,147,598 Ops/sec
querySelectorAll(data-set)	4,897,528 Ops/sec
querySelectorAll(ID)	4,279,558 Ops/sec