MeasureThat.net
  • Create a benchmark
  • Online Toolsnew
  • About
  • Feedback
  • Buy me a coffeeBuy me a coffee

 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:
Tests:

  • getElementById

  • querySelector("#id")

  • getElementsByClassName("class")[0]

  • querySelector(".class")

  • getElementById + getElementsByTagName

  • querySelectorAll("#id tag")

  • getElementById + getElementsByClassName[0]

  • querySelector("#id .class")

  • getElementsByClassName("class")

  • querySelectorAll(".class")

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: 3 years ago)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
Chrome 85 on Mac OS X 10.15.6
View result in a separate tab
Test name Executions per second
getElementById 2695774.0 Ops/sec
querySelector("#id") 1581613.0 Ops/sec
getElementsByClassName("class")[0] 2041642.0 Ops/sec
querySelector(".class") 2171592.0 Ops/sec
getElementById + getElementsByTagName 1937806.0 Ops/sec
querySelectorAll("#id tag") 757438.5 Ops/sec
getElementById + getElementsByClassName[0] 1752574.0 Ops/sec
querySelector("#id .class") 2350442.0 Ops/sec
getElementsByClassName("class") 2510280.0 Ops/sec
querySelectorAll(".class") 798654.8 Ops/sec