Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
find id
(version: 0)
Comparing performance of:
document.getElementById vs $(desiredRow).find
Created:
9 years ago
by:
Registered User
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
document.getElementById
$(desiredRow).find
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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.
Related benchmarks:
last-child
change css
Selectors or children
jQuery.detach
Comments
Confirm delete:
Do you really want to delete benchmark?