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

ⓘ 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: 5 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	2226326.0 Ops/sec
getElementById()	4578748.0 Ops/sec

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