Benchmark: document.body vs document.querySelector vs document.getElementsByTagName speed test

HTML Preparation code:

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body class="bd">
  <div id="foo"></div>
</body>
</html>

Tests:

querySelector
const pageBody = document.querySelector('body');
Direct access
const pageBody = document.body;
getElementsByTagName
const pageBody = document.getElementsByTagName('body')[0];
getElementsByTagName 2
const pageBody = document.getElementsByTagName('body');
getElementsByClassName
const pageBody = document.getElementsByClassName('bd')[0]
getElementsByClassName 2
const pageBody = document.getElementsByClassName('bd')
querySelector 2
const pageBody = document.querySelector('.bd');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
Direct access
getElementsByTagName
getElementsByTagName 2
getElementsByClassName
getElementsByClassName 2
querySelector 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	10707864.0 Ops/sec
Direct access	40125876.0 Ops/sec
getElementsByTagName	10801557.0 Ops/sec
getElementsByTagName 2	21190968.0 Ops/sec
getElementsByClassName	9039530.0 Ops/sec
getElementsByClassName 2	15816221.0 Ops/sec
querySelector 2	9411892.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of several methods for accessing DOM elements in web pages using JavaScript. Specifically, it compares the following approaches to accessing the `<body>` tag of an HTML document and related classes within it:

### Options Compared

1. **`document.body` (Direct Access)**:
   - **Test Name**: Direct access
   - **Definition**: This method directly accesses the `<body>` element of the document.
   - **Performance**: Fastest method among the tests with an impressive execution speed of 40,125,876 operations per second.

2. **`document.querySelector('body')`**:
   - **Test Name**: querySelector
   - **Definition**: This method uses a CSS selector to find the first `<body>` element in the document.
   - **Performance**: Slower than direct access, with an execution speed of 10,707,864 operations per second.

3. **`document.getElementsByTagName('body')[0]`**:
   - **Test Names**: getElementsByTagName, getElementsByTagName 2
   - **Definition**: This method retrieves a live HTMLCollection of elements with the `<body>` tag, and the first element is accessed.
   - **Performance**: Moderate performance with speeds of 21,190,968 and 10,801,557 operations per second, respectively.

4. **`document.getElementsByClassName('bd')[0]`**:
   - **Test Names**: getElementsByClassName, getElementsByClassName 2
   - **Definition**: This method retrieves a live HTMLCollection of elements with the class name ‘bd’ and accesses the first element.
   - **Performance**: Similar to the `getElementsByTagName` results, with execution speeds around 15,816,221 and 9,039,530 operations per second.

5. **`document.querySelector('.bd')`**:
   - **Test Name**: querySelector 2
   - **Definition**: This method uses a CSS selector to find the first element with the class ‘bd’.
   - **Performance**: The slowest for querying classes, with an execution speed of 9,411,892 operations per second.

### Pros and Cons of Different Approaches

- **Direct Access (`document.body`)**:
  - **Pros**: Fastest and most reliable access to the body element; simple syntax.
  - **Cons**: Only works for the `<body>` element specifically.

- **`querySelector`**:
  - **Pros**: Flexible; can select elements using any valid CSS selectors (e.g., IDs, classes).
  - **Cons**: Slower than direct access and could be overkill for simple use cases like accessing the body.

- **`getElementsByTagName`**:
  - **Pros**: Works with a simple tag name; returns a live HTMLCollection, which updates automatically if the DOM changes.
  - **Cons**: Slightly less efficient than direct access; you have to retrieve the first element, which adds complexity.

- **`getElementsByClassName`**:
  - **Pros**: Works with classes directly and returns a live HTMLCollection.
  - **Cons**: Slightly slower than some tag-based methods; requires specific class names to match.

### Considerations
When selecting an approach to access DOM elements, it is important to consider:

- **Performance Requirements**: If accessing the body element is a frequent operation, the performance difference can be significant.
  
- **Readability of Code**: Simpler access methods (`document.body`) are easier to read and maintain. On the other hand, methods like `querySelector` can allow for more complex selections.

- **Scalability**: As the codebase grows, using `querySelector` can provide a lot of flexibility for accessing various elements based on different selectors.

### Alternatives
Other alternatives for accessing DOM elements in JavaScript include:

- **`document.getElementById('someId')`**: Fastest way to access an element by its unique ID.
- **Caching results**: If accessing the same elements multiple times, consider storing references to them to avoid repeated DOM queries.
- **Using frameworks**: Libraries like jQuery abstract away much of the complexity and provide optimized methods for selecting and manipulating DOM elements, though they may add overhead in performance-sensitive applications.

In summary, this benchmark provides valuable insights into the performance characteristics of different DOM access methods, illustrating the trade-offs between speed, readability, and flexibility in JavaScript coding practices.

Related benchmarks:

document.body vs document.querySelector vs document.getElementsByTagName speed test (version: 1)

Comparing performance of: querySelector vs Direct access vs getElementsByTagName vs getElementsByTagName 2 vs getElementsByClassName vs getElementsByClassName 2 vs querySelector 2

Created: 2 months ago by: Guest

Jump to the latest result

querySelector

Direct access

getElementsByTagName

getElementsByTagName 2

getElementsByClassName

getElementsByClassName 2

querySelector 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):