Benchmark: querySelector vs getElementById vs getElementsByClassName vs getElementsByTagName

HTML Preparation code:

    <div class="test1">
        <div class="test1">
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
            <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1">
        <div class="test1">
            <div class="test1"></div>
            <div class="test1">
                <div class="test1">
                    <div class="test1">
                    <article class="test" id="test"></article>
                    </div>
                    <div class="test1">
                    <div class="test1"></div>
                    </div>
                    <div class="test1"></div>
                </div>
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1"></div>
            <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
    </div>

Tests:

getElementById
document.getElementById("test");
querySelector (id)
document.querySelector("#test")
getElementsByClassName
document.getElementsByClassName("test")
querySelector (class)
document.querySelector(".test")
getElementsByTagName
document.getElementsByTagName("test")
querySelector (tag)
document.querySelector("article")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector (id)
getElementsByClassName
querySelector (class)
getElementsByTagName
querySelector (tag)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

User agent: Mozilla/5.0 (Android 11; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0

Browser/OS: Firefox Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
getElementById	4264977.0 Ops/sec
querySelector (id)	1265958.5 Ops/sec
getElementsByClassName	4380357.0 Ops/sec
querySelector (class)	1210883.8 Ops/sec
getElementsByTagName	4360594.0 Ops/sec
querySelector (tag)	1278573.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON and explain the pros and cons of each approach.

**What's being tested:**

The benchmark is comparing the performance of four DOM selection methods:

1. `getElementById`
2. `querySelector` with an ID selector (`#test`)
3. `getElementsByClassName` with a class selector (`class="test"`)
4. `getElementsByTagName` with a tag selector (`tag="test"`)

Additionally, one more test case is being compared: `querySelector` with a tag selector (`article`).

**Options being compared:**

1. **`getElementById`**: This method selects the first element with the specified ID.
	* Pros:
		+ Simple and widely supported
	* Cons:
		+ Can be slow if there are multiple elements with the same ID (caching issues)
2. **`querySelector`**:
	* With an ID selector (`#test`): Selects the first element with the specified ID.
		+ Pros: Fast, efficient, and widely supported.
		+ Cons: May return null if no matching element is found, which can lead to errors in some cases.
	* With a class selector (`class="test"`): Returns an array of all elements that match the specified class.
		+ Pros: Can be fast and efficient, but may return multiple results (if there are multiple elements with the same class).
		+ Cons: May not be as widely supported as other methods.
3. **`getElementsByClassName`**:
	* Returns an array of all elements that match the specified class.
	* Pros:
		+ Can be fast and efficient, especially for large sets of matching elements.
		+ Widely supported in modern browsers.
	* Cons: May not work as expected if there are multiple elements with the same class (due to caching issues).
4. **`getElementsByTagName`**:
	* Returns an array of all elements that match the specified tag name.
	* Pros:
		+ Simple and widely supported.
	* Cons:
		+ Can be slow for large sets of matching elements.

**Special JS feature:**

None mentioned in this benchmark, but it's worth noting that `querySelector` has become a standard method for DOM selection in modern JavaScript (since ECMAScript 2009).

**Benchmark results:**

The latest benchmark results show the performance of each method on an Android device with Firefox Mobile 122. The top performers are:

1. `getElementsByClassName` with a class selector (`class="test"`): ~4380000 executions/second
2. `getElementsByTagName` with a tag selector (`tag="test"`): ~4360000 executions/second
3. `querySelector` with an ID selector (`#test>`): ~1278000 executions/second
4. `getElementById`: ~1210000 executions/second

Please note that these results may vary depending on the specific device, browser version, and system configuration.

In general, the benchmark suggests that:

* `getElementsByClassName` with a class selector is likely to be the fastest method for this test case.
* `getElementsByTagName` with a tag selector is close in performance but slightly slower.
* `querySelector` with an ID selector and `getElementById` are slower due to caching issues.

Related benchmarks:

querySelector vs getElementById vs getElementsByClassName vs getElementsByTagName (version: 0)

Comparing performance of: getElementById vs querySelector (id) vs getElementsByClassName vs querySelector (class) vs getElementsByTagName vs querySelector (tag)

Created: 3 years ago by: Registered User

Jump to the latest result

getElementById

querySelector (id)

getElementsByClassName

querySelector (class)

getElementsByTagName

querySelector (tag)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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