Benchmark: testingqueries - MeasureThat.net

HTML Preparation code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div class="main-container">
      <div class="board">
        <div class="hand-container" id="player2-hand"></div>
        <div class="playing-area" id="player2-area">
          <div class="left-section">
            <div class="abilities">
              <button class="circle ability" id="player2-draw-card-button">
                <svg width="30%" viewbox="0 0 30 42" class="teardrop">
                  <path
                    fill="rgb(66, 132, 169)"
                    d="M15 3
                                  Q16.5 6.8 25 18
                                  A12.8 12.8 0 1 1 5 18
                                  Q13.5 6.8 15 3z"
                  />
                  <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white">
                    2
                  </text>
                </svg>
                Draw Card
              </button>
              <button class="circle ability" id="player2-draw-watersilo-button">
                <svg width="30%" viewbox="0 0 30 42" class="teardrop">
                  <path
                    fill="rgb(66, 132, 169)"
                    d="M15 3
                                    Q16.5 6.8 25 18
                                    A12.8 12.8 0 1 1 5 18
                                    Q13.5 6.8 15 3z"
                  />
                  <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white">
                    1
                  </text>
                </svg>
                Water Silo
              </button>
            </div>
            <div class="cards-column">
              <div class="card" id="watersilo"></div>
              <div class="card" id="raiders"></div>
            </div>
            <div class="water-container" id="player2-water-container">
              <div class="circle water"></div>
              <div class="circle water"></div>
              <div class="circle water"></div>
            </div>
          </div>
          <div class="people-section">
            <div class="column column1">
              <div class="player2 card camp"></div>
              <div class="player2 card empty protected-row"></div>
              <div class="player2 card empty unprotected-row"></div>
            </div>
            <div class="column column2">
              <div class="player2 card camp"></div>
              <div class="player2 card empty protected-row"></div>
              <div class="player2 card empty unprotected-row"></div>
            </div>
            <div class="column column3">
              <div class="player2 card camp"></div>
              <div class="player2 card empty protected-row"></div>
              <div class="player2 card empty unprotected-row"></div>
            </div>
          </div>
          <div class="event-column">
            <div class="event card empty" id="event3">3</div>
            <div class="event card empty" id="event2">2</div>
            <div class="event card empty" id="event1">1</div>
          </div>
        </div>
        <div class="center-draw-row">
          <div class="card-section">
            <div class="card-spot" id="draw-pile"></div>
            <div class="card-spot" id="discard-pile"></div>
          </div>
        </div>
        <div class="playing-area" id="player1-area">
          <div class="left-section">
            <div class="player1 abilities">
              <button class="circle" id="player1-draw-card-button">
                <svg width="30%" viewbox="0 0 30 42" class="teardrop">
                  <path
                    fill="rgb(66, 132, 169)"
                    d="M15 3
                            Q16.5 6.8 25 18
                            A12.8 12.8 0 1 1 5 18
                            Q13.5 6.8 15 3z"
                  />
                  <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white">
                    2
                  </text>
                </svg>
                Draw Card
              </button>
              <button class="circle" id="player1-draw-watersilo-button">
                <svg width="30%" viewbox="0 0 30 42" class="teardrop">
                  <path
                    fill="rgb(66, 132, 169)"
                    d="M15 3
                        Q16.5 6.8 25 18
                        A12.8 12.8 0 1 1 5 18
                        Q13.5 6.8 15 3z"
                  />
                  <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="white">
                    1
                  </text>
                </svg>
                Water Silo
              </button>
            </div>
            <div class="cards-column">
              <div class="card" id="watersilo"></div>
              <div class="card" id="raiders"></div>
            </div>
            <div class="player1 water-container" id="player1-water-container">
              <div class="circle water"></div>
              <div class="circle water"></div>
              <div class="circle water"></div>
              <!-- <div class="water-container2">
                <div class="circle water"></div>
                <div class="circle water"></div>
              </div> -->
            </div>
          </div>
          <div class="people-section">
            <div class="player1 column column1">
              <div class="player1 card empty protected-row"></div>
              <div class="player1 card empty unprotected-row"></div>
              <div class="player1 card camp"></div>
            </div>
            <div class="player1 column column2">
              <div class="player1 card empty protected-row"></div>
              <div class="player1 card empty unprotected-row"></div>
              <div class="player1 card camp"></div>
            </div>
            <div class="player1 column column3">
              <div class="player1 card empty protected-row"></div>
              <div class="player1 card empty unprotected-row"></div>
              <div class="player1 card camp"></div>
            </div>
          </div>
          <div class="player1 event-column">
            <div class="event card empty" id="event1">1</div>
            <div class="event card empty" id="event2">2</div>
            <div class="event card empty" id="event3">3</div>
          </div>
        </div>
        <div class="hand-container" id="player1-hand"></div>
      </div>
      <div class="info-column">
        <div class="message-area">messages</div>
      </div>
    </div>
  </body>
</html>

<!-- <div class="handArea" id="player-hand">
          <div class="card people" id="assassin"></div>
          <div class="card people" id="cultLeader"></div>
          <div class="card people" id="doomsayer"></div>
          <div class="card people" id="exterminator"></div>
          <div class="card people" id="gunner"></div>
          <div class="card people" id="holdout"></div>
          <div class="card people" id="looter"></div>
          <div class="card people" id="mimic"></div>
</div> -->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

TESTER1
function $id(id) { return document.getElementById(id); } $id("player1-draw-watersilo-button");
TESTER2
function $class(className) { return document.getElementsByClassName(className); } $class("player1 abilities");
TESTER4
function $(val) { return document.querySelector(val); } $("#player1-draw-watersilo-button");
TESTER5
function $(val) { return document.querySelector(val); } $(".player1 .abilities");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TESTER1
TESTER2
TESTER4
TESTER5

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/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
TESTER1	40471852.0 Ops/sec
TESTER2	31960950.0 Ops/sec
TESTER4	1238068.2 Ops/sec
TESTER5	1141966.5 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview

The provided benchmark focuses on testing the performance of different methods to retrieve HTML elements from the DOM (Document Object Model). The benchmark compares how quickly various functions can return elements based on different selectors, specifically for a web application interface. Here is a breakdown of the individual test cases, their purpose, and implications.

### Individual Test Cases

1. **TESTER1**
   - **Functionality**: Uses the `getElementById()` method.
   - **Selector**: `#player1-draw-watersilo-button`.
   - **Performance**: Executions per second: **40,471,852**
   - **Pros**: This method is very fast and efficient as it targets an element directly by its unique ID.
   - **Cons**: Limited to ID selectors only. If you need to access multiple elements or complex queries, this isn't suitable.

2. **TESTER2**
   - **Functionality**: Uses `getElementsByClassName()`.
   - **Selector**: `.player1 abilities` (with a class name).
   - **Performance**: Executions per second: **31,960,950**
   - **Pros**: This method efficiently selects all elements with a specified class name. It's useful for styling or event bindings across multiple elements.
   - **Cons**: Returns a live HTMLCollection rather than a static array. This means the collection automatically updates when the DOM changes, which can lead to performance issues or unintentional behavior if not handled properly.

3. **TESTER4**
   - **Functionality**: Uses `querySelector()`.
   - **Selector**: `#player1-draw-watersilo-button`.
   - **Performance**: Executions per second: **1,238,068.25**
   - **Pros**: Allows for more complex selectors (e.g., CSS-like selectors), making it very versatile. It returns the first element matching the selector.
   - **Cons**: Slower compared to `getElementById()` and `getElementsByClassName()`, as it has to parse the selector and create a CSS-like matching algorithm.

4. **TESTER5**
   - **Functionality**: Uses `querySelector()`.
   - **Selector**: `.player1 .abilities` (class selector).
   - **Performance**: Executions per second: **1,141,966.5**
   - **Pros**: Like TESTER4, it allows for complex selectors which can target nested elements.
   - **Cons**: As with TESTER4, slightly slower due to additional parsing for selectors.

### Performance Summary

The benchmarks show a significant difference in performance between ID selection (`getElementById()`), and class or CSS selector methods (`getElementsByClassName()` and `querySelector()`):

- **Best Performer**: `getElementById()` is the clear winner for speed, which is expected since accessing an ID is typically O(1) complexity.
- **Middle Performer**: `getElementsByClassName()` is also fast but slower than ID selectors because it needs to traverse the DOM for all matching elements.
- **Lower Performers**: `querySelector()` methods, while more flexible and powerful, are substantially slower due to the overhead of parsing and matching complex CSS selectors.

### Other Considerations

- **Code Maintainability**: Although `querySelector()` is slower, its ability to provide complex selectors can lead to cleaner, more maintainable code. It allows developers to write less code and avoid unnecessary DOM manipulation.
- **Usage Context**: The choice of method can depend heavily on application context. For applications that require a lot of dynamic DOM changes, the difference in performance may be crucial.
- **Browser Variability**: Different browsers might optimize these methods differently, so testing across browsers is advisable, especially if targeting specific environments.

### Alternatives to Consider

- **`getElementsByTagName()`**: Similar to `getElementsByClassName()`, it retrieves elements based on tag names but does not support the versatility of class names or IDs.
- **`document.querySelectorAll()`**: Provides a static NodeList of all elements matching a selector, allowing for batch operations but is also slower.
- **Custom Selector Libraries**: Libraries like jQuery abstract these DOM selection methods and are optimized for performance. However, with modern browsers and JavaScript performance improvements, the native methods may suffice.

In summary, when selecting a method for DOM querying, developers should weigh performance and specificity against the complexity of the selectors needed for their application.

Related benchmarks:

testingqueries (version: 1)

Comparing performance of: TESTER1 vs TESTER2 vs TESTER4 vs TESTER5

Created: 2 months ago by: Guest

Jump to the latest result

TESTER1

TESTER2

TESTER4

TESTER5

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