Benchmark: Testing getElementById vs getElementsByClassName vs querySelector vs querySelectorAll

HTML Preparation code:

<div class="test" id="testing"></div>

Tests:

getElementById
document.getElementById("testing")
getElementsByClassName
document.getElementsByClassName("test")
querySelector
document.querySelector(".test")
querySelectorAll
document.querySelectorAll(".test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByClassName
querySelector
querySelectorAll

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: 2 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_8 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/93.0.4577.39 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 93 on iOS 14.8

View result in a separate tab

Test name	Executions per second
getElementById	6243466.0 Ops/sec
getElementsByClassName	6032149.0 Ops/sec
querySelector	4718493.0 Ops/sec
querySelectorAll	2970453.0 Ops/sec

Testing getElementById vs getElementsByClassName vs querySelector vs querySelectorAll (version: 0)

Comparing performance of: getElementById vs getElementsByClassName vs querySelector vs querySelectorAll

Created: 2 years ago by: Guest

Jump to the latest result

getElementById

getElementsByClassName

querySelector

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A