Benchmark: getElementById vs querySelector(css) vs getElementsByClassName vs getElementsByName

HTML Preparation code:

<div id="testdiv">
  <div id="unique" class="unique" name="unique" data-unique="1">test</div>
</div>

Script Preparation code:

var i, imax;
var doc = document;

Tests:

getElementById
var test = doc.getElementById('testdiv').childNodes[0].innerHTML;
getElementsByTagName
var formelem = doc.getElementById('testdiv').getElementsByTagName('div')[0].innerHTML;
querySelector
var test = doc.querySelector('#testdiv .unique').innerHTML;
getElementsByClassName
var test = doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML;
getElementById unique
var formelem = doc.getElementById('unique').innerHTML;
querySelector (unique id)
var formelem = doc.querySelector('#unique').innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByTagName
querySelector
getElementsByClassName
getElementById unique
querySelector (unique id)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript performance benchmarking on MeasureThat.net.

**Benchmark Overview**

The provided benchmark tests the performance of different methods to retrieve a single DOM element: `getElementById`, `querySelector`, `getElementsByClassName`, and their variants (`getElementsByTagName` and `querySelector (unique id)`). The test case creates an HTML document with a nested structure, featuring a `div` element with multiple attributes (`id`, `class`, `name`, and `data-unique`).

**Methods Compared**

The benchmark compares the performance of five methods:

1. **`getElementById`**: Retrieves an element by its `id` attribute.
2. **`querySelector`**: Retrieves an element using a CSS selector (in this case, `#testdiv .unique`).
3. **`getElementsByClassName`**: Retrieves all elements with a specific class name (`unique`).
4. **`getElementsByTagName`**: Retrieves all child elements of the current element (specifically, the first `div` element within the `testdiv` container).

**Pros and Cons**

Here's a brief overview of each method's performance characteristics:

*   **`getElementById`**:
    *   Pros: Fastest for single-element lookups.
    *   Cons: Returns an array containing only one element, which can be slower than other methods for non-existent elements or when searching within arrays.
*   **`querySelector`** and **`querySelector (unique id)`**:
    *   Pros: Flexible and powerful, allowing for more complex selectors. Fast for most use cases.
    *   Cons: May have slower performance than `getElementById` due to the overhead of parsing CSS selectors.
*   **`getElementsByClassName`**:
    *   Pros: Allows searching by class name, which can be useful in certain situations.
    *   Cons: Returns an array of all matching elements, which can be slower and more memory-intensive than other methods.
*   **`getElementsByTagName`**:
    *   Pros: Fast for retrieving child elements.
    *   Cons: May not be suitable for searching within arrays or looking up a single element.

**Library Use**

In this benchmark, the `document` object is used to access DOM elements. The `document` object provides a set of methods and properties that allow you to interact with the document's content.

**Special JS Features**

This benchmark does not use any special JavaScript features like `let`, `const`, or arrow functions, which are commonly used in modern web development.

**Other Alternatives**

If you're looking for alternative performance testing tools for JavaScript, consider:

*   **Benchmark.js**: A popular benchmarking library that provides a simple API for writing and running benchmarks.
*   **Fastbench**: A lightweight, fast benchmarking tool specifically designed for Node.js applications.
*   **Testim.io**: An automated testing and benchmarking platform that allows you to create and run tests for your JavaScript code.

Keep in mind that performance optimization should always be tailored to the specific requirements of your application.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 11; SM-A505FN) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.66 Mobile Safari/537.36

Browser/OS: Chrome Mobile 90 on Android

View result in a separate tab

Test name	Executions per second
getElementById	1490662.5 Ops/sec
getElementsByTagName	825837.4 Ops/sec
querySelector	749238.2 Ops/sec
getElementsByClassName	872561.6 Ops/sec
getElementById unique	1260868.4 Ops/sec
querySelector (unique id)	690684.2 Ops/sec

Related benchmarks:

getElementById vs querySelector(css) vs getElementsByClassName vs getElementsByName (version: 0)

Test performance of different ways of get just one particular DOM element

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

Created: 3 years ago by: Guest

Jump to the latest result

getElementById

getElementsByTagName

querySelector

getElementsByClassName

getElementById unique

querySelector (unique id)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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