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: 7 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("id1").getElementsByTagName("li"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
querySelectorAll("#id tag")
var all = document.querySelectorAll("#id1 li"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
getElementById + getElementsByClassName[0]
document.getElementById("id1").getElementsByClassName("c1")[0].innerHTML = "ciao"
querySelector("#id .class")
document.querySelector("#id1 .c1").innerHTML = "ciao"
getElementsByClassName("class")
var all = document.getElementsByClassName("c1"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }
querySelectorAll(".class")
var all = document.querySelectorAll(".c1"); for (var i=0; i<all.length; i++) { all[i].innerHTML = "ciao"; }

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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case, specifically designed to measure the performance of different DOM selection methods in modern web browsers. The test compares various approaches for selecting elements on a webpage.

**Selected Methods and Their Options**

Here are the selected methods, their options, pros, cons, and other considerations:

1. **`document.getElementById("id2").innerHTML = "ciao"`**
	* Option: `getElementById(id)`
	* Pros: Simple and efficient when only one element is expected.
	* Cons: May throw an error if no element with the given ID exists.
	* Consideration: Only suitable for single-element selection. Not ideal for multiple elements or more complex selections.
2. **`document.querySelector("#id2").innerHTML = "ciao"`**
	* Option: `querySelector(selector)`
	* Pros: More efficient than `getElementById` when multiple elements match the selector.
	* Cons: May not find an element if the DOM is not fully loaded or if the CSS rule is not applied yet.
	* Consideration: Suitable for simple selectors, but may have performance issues with complex or dynamic selectors.
3. **`document.querySelector("#id").innerHTML = "ciao"`** ( Note: This option is slightly different from the original test case)
	* Option: `querySelector(selector)`
	* Pros: Similar to the previous option, but uses a more specific selector.
	* Cons: May not find an element if the CSS rule is not applied yet or if the DOM is not fully loaded.
	* Consideration: Suitable for simple selectors, but may have performance issues with complex or dynamic selectors.
4. **`document.querySelector("#id .class").innerHTML = "ciao"`** (Note: This option is slightly different from the original test case)
	* Option: `querySelector(selector)`
	* Pros: More specific than the previous options, allowing for more precise selection.
	* Cons: May have performance issues with complex or dynamic selectors.
	* Consideration: Suitable for situations where a more specific selector is required.
5. **`document.querySelectorAll("#id").innerHTML = "ciao"`** (Note: This option is slightly different from the original test case)
	* Option: `querySelectorAll(selector)`
	* Pros: More efficient than using multiple calls to `querySelector`.
	* Cons: Returns a NodeList, which may be less intuitive for some developers.
	* Consideration: Suitable for situations where multiple elements need to be selected.

**Browser Performances**

The benchmark results show the execution speed of each method in Chrome 55 on various devices. The fastest methods are usually those that use `querySelector` with a specific or simple selector, such as `$2`. The slower methods are often those that use `getElementById` or `querySelectorAll` with more complex selectors.

**Conclusion**

The benchmark highlights the importance of choosing the most efficient DOM selection method for your specific use case. When simplicity and speed matter, `querySelector` with a specific or simple selector is likely the best choice. However, when more precise control over the selection process is required, other methods may be necessary.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Browser/OS: Chrome 55 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	306914.6 Ops/sec
querySelector("#id")	290923.1 Ops/sec
getElementsByClassName("class")[0]	301745.1 Ops/sec
querySelector(".class")	192167.2 Ops/sec
getElementById + getElementsByTagName	82686.9 Ops/sec
querySelectorAll("#id tag")	69106.5 Ops/sec
getElementById + getElementsByClassName[0]	285188.7 Ops/sec
querySelector("#id .class")	282789.2 Ops/sec
getElementsByClassName("class")	83912.9 Ops/sec
querySelectorAll(".class")	42237.8 Ops/sec

Related benchmarks:

Different types of selecting (version: 0)

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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):