Benchmark: Testing getElementById vs getElementsByClassName vs querySelector vs querySelectorAll plus change classname

HTML Preparation code:

<div class="test" id="testing"></div>

Tests:

getElementById
el = document.getElementById("testing") el.classList.add('XXXXXXXX')
getElementsByClassName
el = [...document.getElementsByClassName("test")] el[0].classList.add('XXXXXXXX')
querySelector
el = document.querySelector(".test") el.classList.add('XXXXXXXX')
querySelectorAll
el = document.querySelectorAll(".test") el[0].classList.add('XXXXXXXX')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByClassName
querySelector
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 92 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	748586.3 Ops/sec
getElementsByClassName	539067.3 Ops/sec
querySelector	710265.9 Ops/sec
querySelectorAll	339425.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmarking test case that compares the performance of four different methods to retrieve elements from an HTML document:

1. `getElementById`: Retrieves an element by its ID attribute.
2. `getElementsByClassName`: Retrieves all elements with a specified class name.
3. `querySelector`: Retrieves an element using a CSS selector.
4. `querySelectorAll`: Retrieves all elements that match a CSS selector.

The test also involves adding a dynamic class to the retrieved element and measuring the execution time.

**Options comparison**

Here's a brief overview of each option, their pros and cons:

1. **`getElementById`**:
	* Pros: Fastest and most straightforward method.
	* Cons: Only works if the element has an ID attribute, which can be restrictive in some cases.
2. **`getElementsByClassName`**:
	* Pros: Works even if there are multiple elements with the same class name, but it returns a NodeList (array-like object) instead of a single value.
	* Cons: Can be slower than `getElementById` due to the additional processing required to retrieve all matching elements.
3. **`querySelector`**:
	* Pros: More flexible and powerful than `getElementsByClassName`, as it allows for more complex selectors.
	* Cons: Can be slower than `getElementById` or `getElementsByClassName` because of the additional parsing and execution time required by the CSS selector engine.
4. **`querySelectorAll`**:
	* Pros: Similar to `querySelector`, but returns a NodeList of all matching elements instead of a single value.
	* Cons: Can be slower than `getElementById` or `getElementsByClassName` due to the additional processing required to retrieve all matching elements.

**Library usage**

None of the options rely on any external libraries, making them independent and self-contained tests.

**Special JavaScript features/syntax**

The test cases use some standard JavaScript features, such as:

* `document.getElementById`, `document.getElementsByClassName`, `document.querySelector`, and `document.querySelectorAll` methods.
* CSS selectors (e.g., `.test`, `#testing`) to specify the element retrieval criteria.

**Other alternatives**

If you want to explore alternative approaches or libraries for similar performance benchmarks, consider using:

1. **Benchmarking frameworks**: Such as BenchmarkJS, WebPageTest, or Microbenchmark, which provide more advanced features and tools for building and running microbenchmarks.
2. **Native JavaScript methods**: For example, `elementFromPoint` (Web Content Accessibility Guidelines 2.0) or `document.createTreeWalker`, which might be faster or more efficient in certain scenarios.

Keep in mind that the best approach will depend on your specific use case, performance requirements, and browser support.

Related benchmarks:

Testing getElementById vs getElementsByClassName vs querySelector vs querySelectorAll plus change classname (version: 0)

Comparing performance of: getElementById vs getElementsByClassName vs querySelector vs querySelectorAll

Created: 3 years ago by: Guest

Jump to the latest result

getElementById

getElementsByClassName

querySelector

querySelectorAll

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