Benchmark: Different types of selecting

Different types of selecting (version: 0)

Comparing performance of: getElementById vs querySelector("#id") vs getElementsByClassName("class")[0] vs querySelector(".class") vs getElementById + getElementsByTagName vs querySelectorAll("#id tag") vs getElementById + getElementsByClassName[0] vs querySelector("#id .class") vs getElementsByClassName("class") vs querySelectorAll(".class")

Created: 6 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div>
  <ul id="id1">
    <li class="c1">Element</li>
    <li id="id2" class="c1">Element</li>
    <li class="c1">Element</li>
    <li class="c1">Element</li>
  </ul>
</div>

Tests:

getElementById
document.getElementById("id2").innerHTML = "ciao"
querySelector("#id")
document.querySelector("#id2").innerHTML = "ciao"
getElementsByClassName("class")[0]
document.getElementsByClassName("c1")[0].innerHTML = "ciao"
querySelector(".class")
document.querySelector(".c1").innerHTML = "ciao"
getElementById + getElementsByTagName
var all = document.getElementById("id2").getElementsByTagName("li"); var count = 0; for (var i=0; i<all.length; i++) { count++; }
querySelectorAll("#id tag")
var all = document.querySelectorAll("#id2 li"); var count = 0; for (var i=0; i<all.length; i++) { count++; }
getElementById + getElementsByClassName[0]
document.getElementById("id2").getElementsByClassName("c1")[0].innerHTML = "ciao"
querySelector("#id .class")
document.querySelector("#id2 .c1").innerHTML = "ciao"
getElementsByClassName("class")
var all = document.getElementsByClassName("c1"); var count = 0; for (var i=0; i<all.length; i++) { count++; }
querySelectorAll(".class")
var all = document.querySelectorAll(".c1"); var count = 0; for (var i=0; i<all.length; i++) { count++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector("#id")
getElementsByClassName("class")[0]
querySelector(".class")
getElementById + getElementsByTagName
querySelectorAll("#id tag")
getElementById + getElementsByClassName[0]
querySelector("#id .class")
getElementsByClassName("class")
querySelectorAll(".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: 6 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

Browser/OS: Firefox 55 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	239449.8 Ops/sec
querySelector("#id")	233847.6 Ops/sec
getElementsByClassName("class")[0]	232259.4 Ops/sec
querySelector(".class")	123337.0 Ops/sec
getElementById + getElementsByTagName	2069198.0 Ops/sec
querySelectorAll("#id tag")	57407.4 Ops/sec
getElementById + getElementsByClassName[0]	0.0 Ops/sec
querySelector("#id .class")	0.0 Ops/sec
getElementsByClassName("class")	2327025.0 Ops/sec
querySelectorAll(".class")	48054.1 Ops/sec

Different types of selecting (version: 0)

Created: 6 years ago by: Guest

Jump to the latest result

getElementById

querySelector("#id")

getElementsByClassName("class")[0]

querySelector(".class")

getElementById + getElementsByTagName

querySelectorAll("#id tag")

getElementById + getElementsByClassName[0]

querySelector("#id .class")

getElementsByClassName("class")

querySelectorAll(".class")

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A