Benchmark: find id - MeasureThat.net

HTML Preparation code:

<script
			  src="https://code.jquery.com/jquery-2.1.3.min.js"
			  integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="
			  crossorigin="anonymous"></script>

<table id="tableList" class="slcBody" cellspacing="0" cellpadding="1" role="listbox">
   <tbody>
      <tr role="option" class="slcRow" aria-selected="true" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;"> </td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Abby Benton</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Abby Fender</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Schuck</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Gosdin</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Harris</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Aimee</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Perry</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alan Mathis</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alex Arnold</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alex Crawford</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alex Dennison</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alex Steele</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alexandra Hall</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alexandra Blades</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Alyssa Hooks</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Andre Milano</td>
      </tr>
      <tr id="desiredTr" role="option" class="slcRow" style="height: 16px;">
         <td id="desiredTd" nowrap="" style="padding-left: 7px;">Angel McRaney</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony John Beck</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony John Russell</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony John Rasche</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony Michael Delany</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony Michael Carter</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Anthony Michael Frann</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Arielle Barash</td>
      </tr>
      <tr role="option" class="slcRow" style="height: 16px;">
         <td nowrap="" style="padding-left: 7px;">Arielle Carter</td>
      </tr>
   </tbody>
</table>

Script Preparation code:

var desiredRow = document.getElementById("desiredTr");

Tests:

document.getElementById
var element = document.getElementById("desiredTd");
$(desiredRow).find
var element = $(desiredRow).find("#desiredTd");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.getElementById
$(desiredRow).find

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition JSON:**

The benchmark definition is stored in the `Script Preparation Code` field, which contains JavaScript code that prepares for the test:
```javascript
var desiredRow = document.getElementById("desiredTr");
```
This sets up a variable `desiredRow` to reference the HTML element with the ID "desiredTr".

**Individual Test Cases:**

There are two individual test cases:

1. **document.getElementById**
```javascript
Benchmark Definition: var element = document.getElementById("desiredTd");
Test Name: document.getElementById
```
This test case uses the `document.getElementById()` method to retrieve an HTML element with the ID "desiredTd". The test aims to measure the performance of this method.

2. **$(desiredRow).find("#desiredTd")**
```javascript
Benchmark Definition: var element = $(desiredRow).find("#desiredTd");
Test Name: $(desiredRow).find
```
This test case uses jQuery's `.find()` method to retrieve an HTML element with the ID "desiredTd" from a previously set-up variable `desiredRow`. The test aims to measure the performance of this method.

**Latest Benchmark Result:**

The benchmark result shows two tests, both measuring the performance of the mentioned methods:

| Test Name | Executions Per Second |
| --- | --- |
| document.getElementById | 1567714.75 |
| $(desiredRow).find | 39581.21484375 |

In this case, the `document.getElementById()` method outperforms the jQuery-based `.find()` method by a significant margin.

**What's being tested:**

The benchmark is testing the performance of two methods:

1. **`document.getElementById()`**: This is a vanilla JavaScript method that retrieves an HTML element by its ID.
2. **`$(desiredRow).find("#desiredTd")`**: This is a jQuery-based method that uses the `find()` function to retrieve an HTML element with the specified ID from a previously set-up variable `desiredRow`.

The benchmark aims to compare the performance of these two methods, likely to determine which one is faster and more efficient in terms of execution time.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 5.1; rv:50.0) Gecko/20100101 Firefox/50.0

Browser/OS: Firefox 50 on Windows XP

View result in a separate tab

Test name	Executions per second
document.getElementById	1567714.8 Ops/sec
$(desiredRow).find	39581.2 Ops/sec

Related benchmarks:

find id (version: 0)

Comparing performance of: document.getElementById vs $(desiredRow).find

Created: 8 years ago by: Registered User

Jump to the latest result

document.getElementById

$(desiredRow).find

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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