Benchmark: document.body.getElementsByClassName vs document.getElementsByClassName +more el

HTML Preparation code:

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
<span class="aap2">AAP</span>
<div class="aap1">AAP<div class="aap3">AAP</div></div>
<div class="aap">AAP<span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span></div>
<div class="aap-tttt">AAP</div>
<div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
  <div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
  <div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
  <span class="aap2">AAP</span>
<div class="aap1">AAP<div class="aap3">AAP</div></div>
<div class="aap">AAP<span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span><span class="aap2">AAP</span></div>
<div class="aap-tttt">AAP</div>
<div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
  <div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
  <div class="aap-ttt">AAP<div class="aap-t">AAP<div class="aap-tt">AAP</div></div></div>
</body>
</html>

Tests:

getElementsByClassName
const classElm = document.getElementsByClassName('aap')[0];
body.getElementsByClassName
const classElm = document.body.getElementsByClassName('aap')[0];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
body.getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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
getElementsByClassName	8709518.0 Ops/sec
body.getElementsByClassName	7149004.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests the performance of two different ways to retrieve elements by their class name in the Document Object Model (DOM) using JavaScript. The key components of this benchmark involve two methods of calling `getElementsByClassName`, which is a built-in method used to fetch element nodes in an HTML document that match a specific class name.

### What is Tested

1. **Method 1: `document.getElementsByClassName('aap')[0]`**
   - This method directly calls `getElementsByClassName` on the global document object.
   - It retrieves the first element that has the class name `aap`.

2. **Method 2: `document.body.getElementsByClassName('aap')[0]`**
   - This method calls `getElementsByClassName` on `document.body`, targeting elements that are specifically within the body of the document.
   - It effectively achieves the same output as Method 1 but does so through a different reference point in the DOM.

### Performance Results

The benchmark results indicate the number of executions per second for both methods on the same browser and operating system:

- **Method 1 (`getElementsByClassName`)**: 8,709,518 executions per second
- **Method 2 (`body.getElementsByClassName`)**: 7,149,004 executions per second

### Pros and Cons of Each Approach

#### `document.getElementsByClassName('aap')`
- **Pros**:
  - More straightforward and universally applicable as it does not depend on the context of the body element.
  - Might perform slightly better since it directly queries the whole document.
  
- **Cons**:
  - Less specific when dealing with complex nested structures; it searches the entire document, which in cases of large DOMs may carry a slight overhead.

#### `document.body.getElementsByClassName('aap')`
- **Pros**:
  - Contextually specific, which can be beneficial in large documents, as it only searches within the body.
  - Can help eliminate elements outside the body which might be irrelevant, maintaining clarity in accessing elements within visual or interactive regions.
  
- **Cons**:
  - Slightly slower in this benchmark, possibly due to additional context resolution within the body.

### Other Considerations
1. **Context**: Choosing one approach over the other may depend on the structure of the document. If most elements are nested deeply within the body, using `document.body` may be advantageous.
  
2. **Readability**: The second approach (`body.getElementsByClassName`) may enhance code readability by indicating that the elements being accessed are part of the body, which is useful for developers working with complex pages.

### Alternatives
Other methods to access elements could be considered alternatives depending on particular needs:
- **`querySelector` or `querySelectorAll`**: These methods allow for more sophisticated selectors (i.e., CSS-like syntax). They can filter elements based not only on class names but also on attributes, tags, and other custom selectors.
- **Frameworks/Libraries**: Using jQuery (or similar libraries) could offer a more concise syntax, and potentially optimized selection methods. However, introducing such libraries adds weight to the project.

In conclusion, the choice of which method to use can depend on specific use cases, with performance being one of the factors to consider alongside readability and maintainability of code.

Related benchmarks:

document.body.getElementsByClassName vs document.getElementsByClassName +more el (version: 1)

Comparing performance of: getElementsByClassName vs body.getElementsByClassName

Created: one year ago by: Guest

Jump to the latest result

getElementsByClassName

body.getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):