Benchmark: querySelector() vs getElementsByClassName()[0] vs getElementById() (with random dom tree)

Script Preparation code:

function randomNumber(max) {
	return Math.floor(Math.random() * Math.floor(max))
}
function randomString(length) {
	const rand = Math.random().toString(36).slice(2)
	if (!length) return rand
	if (rand.length >= length) return rand.slice(0, length)
	return rand + randomString(length - rand.length)
}
function randomElement(className) {
	const e = document.createElement('div')
	if (typeof className === 'string') e.classList.add(className)
	return e
}
function produceRandomElements(count) {
	count = count || 1000
	const elements = []
	for (let i = 0; i < count; i++) {
		elements.push(randomElement(randomString(5)))
	}
	return elements
}
function nestRandomly(elements) {
	while (elements.length > 1) {
		const i = randomNumber(elements.length)
		const j = randomNumber(elements.length - 1)
		const e = elements[i]
		elements.splice(i, 1)

		const t = elements[j]
		elements[j].appendChild(e)
		if (t.children && t.children.length > 3) nestRandomly(Array.from(t.children))
	}
	return elements[0]
}
function produceTestTree(count) {
	const elements = produceRandomElements(count)
	const target = elements[randomNumber(elements.length)]
	target.classList.add('test')
	target.id = 'test'
	return nestRandomly(elements)
}
document.body.appendChild(produceTestTree())

Tests:

querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName("test")[0]
getElementById()
document.getElementById("test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByClassName
getElementById()

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 dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test that compares the performance of three different methods for selecting an element in a DOM tree:

1. `querySelector()`
2. `getElementsByClassName()[0]` (note: this method returns an array with one element, which is then indexed to get the first element)
3. `getElementById()` (with a random ID generated using the provided code)

**Options compared:**

* `querySelector()`: This method uses a CSS selector to find an element in the DOM tree. It's a convenient and powerful way to select elements based on their class, id, or attribute values.
* `getElementsByClassName()[0]`: As mentioned earlier, this method returns an array with one element, which is then indexed to get the first element. This approach can be slower than `querySelector()` because it involves creating an array and indexing into it.
* `getElementById()`: This method uses the id attribute of an element to find it in the DOM tree. It's a simple and efficient way to select elements based on their unique identifier.

**Pros and Cons:**

* `querySelector()`:
	+ Pros: fast, convenient, powerful, and flexible
	+ Cons: may be slower than `getElementById()` for very specific selectors (e.g., `#id` vs. `.class`)
* `getElementsByClassName()[0]`:
	+ Pros: can be used to select elements based on multiple class names or attributes
	+ Cons: creates an array and indexes into it, which can be slower than using `querySelector()`
* `getElementById()`:
	+ Pros: fast, simple, and efficient for selecting elements by id
	+ Cons: limited to selecting elements based on their id attribute

**Library usage:**

None of the provided code uses any external libraries. The `randomNumber` and `randomString` functions are custom implementations used to generate random IDs for the test tree.

**Special JS features or syntax:**

The benchmark code uses some special JavaScript features, such as:

* `Math.floor(Math.random() * Math.floor(max))`: a clever way to generate a pseudo-random number within a specified range.
* `Array.from(t.children)`: a modern way to create an array from the children of an element (introduced in ECMAScript 2015).
* `const e = document.createElement('div')`: creates a new HTML element using the `document.createElement()` method.

**Other alternatives:**

If you want to test other query methods, you could consider adding the following benchmark definitions:

* `querySelectorAll()`: tests the performance of selecting all elements matching a CSS selector.
* `getElementsByName()`: tests the performance of selecting elements based on their name attribute.
* `getElementById()` with different types of IDs (e.g., unique ID, data ID).

These alternatives would allow you to compare the performance of different query methods and gain insights into the optimal approach for your specific use case.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

Browser/OS: Firefox 62 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	31581.4 Ops/sec
getElementsByClassName	2226325.5 Ops/sec
getElementById()	4578747.5 Ops/sec

Related benchmarks:

querySelector() vs getElementsByClassName()[0] vs getElementById() (with random dom tree) (version: 0)

Testing query speed of a single element, in a random dom tree

Comparing performance of: querySelector vs getElementsByClassName vs getElementById()

Created: 6 years ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName

getElementById()

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