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("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

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Description**

The benchmark measures the performance of different methods for selecting elements on an HTML page. The script preparation code generates an unordered list with 4 items, and each item has a specific class or ID.

**Test Cases**

There are 8 test cases that compare the performance of different methods:

1. `getElementById`
2. `querySelector("#id")`
3. `getElementsByClassName("class")[0]`
4. `querySelector(".c1")`
5. `getElementById + getElementsByTagName`
6. `querySelectorAll("#id tag")`
7. `querySelectorAll(".c1")`
8. `getElementById + getElementsByClassName[0]`

**Library Used**

None of the test cases use any specific library, as they only rely on built-in JavaScript DOM methods.

**Special JS Feature or Syntax**

There is no special JS feature or syntax used in this benchmark. All tests are standard JavaScript code that uses basic DOM methods.

Let's analyze each test case:

1. `getElementById`
	* This method selects an element by its ID.
	* The performance difference between this method and others may be due to the fact that it only returns one element, while others may return multiple elements or use more advanced matching techniques.
2. `querySelector("#id")`
	* This method selects an element by its ID, using a CSS selector syntax.
	* Performance-wise, this method is likely to be faster than `getElementById` because it can match other elements that have the same ID, reducing the number of DOM lookups required.
3. `getElementsByClassName("class")`
	* This method selects all elements by their class name.
	* The performance difference between this method and others may be due to the fact that it returns multiple elements, while others may only return one element or use more advanced matching techniques.
4. `querySelector(".c1")`
	* This method selects an element by its class name using a CSS selector syntax.
	* Performance-wise, this method is likely to be faster than `getElementsByClassName("class")` because it can match other elements that have the same class name, reducing the number of DOM lookups required.
5. `getElementById + getElementsByTagName`
	* This method first selects an element by its ID using `getElementById`, and then selects all elements with a specific tag name (in this case, "li") using `getElementsByTagName`.
	* The performance difference between this method and others may be due to the fact that it performs two separate DOM lookups.
6. `querySelectorAll("#id tag")`
	* This method selects all elements by their ID and tag name using a CSS selector syntax.
	* Performance-wise, this method is likely to be faster than other methods because it can match multiple elements in a single operation.
7. `querySelectorAll(".c1")`
	* This method selects all elements by their class name using a CSS selector syntax.
	* The performance difference between this method and others may be due to the fact that it returns multiple elements, while others may only return one element or use more advanced matching techniques.
8. `getElementById + getElementsByClassName[0]`
	* This method first selects an element by its ID using `getElementById`, and then selects the first element with a specific class name using `getElementsByClassName`.
	* The performance difference between this method and others may be due to the fact that it performs two separate DOM lookups.

**Conclusion**

The benchmark suggests that `querySelector("#id")` and `querySelectorAll(".c1")` are likely to be the fastest methods, followed closely by `querySelectorAll("#id tag")`. This is because these methods can match multiple elements in a single operation, reducing the number of DOM lookups required. The other methods may have performance differences due to the fact that they return only one element or use more advanced matching techniques.

The results also show that some test cases (e.g., `getElementById + getElementsByClassName[0]`) can be very slow or even return 0 results, which is likely due to caching or optimization issues in the browser.

Latest run results:

Run details: (Test run date: 7 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.4 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")	2327024.8 Ops/sec
querySelectorAll(".class")	48054.1 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 27 days ago):