Benchmark: New test - MeasureThat.net

HTML Preparation code:

<div class="container">
	<section class="section1">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section2">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section3">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section4">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section5">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section6">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section7">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section8">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section9">
		<div class="wrapperFake">
			<div class="adSlotContainer">
				<div class="slotFake">
						<iframe class="iframeFake"></iframe>
				</div>
			</div>    
		</div>
	</section>
	<section class="section10">
		<div class="wrapper" id="wrapper">
			<div class="adSlotContainer">
        <div class="addtionalDivOne">
					<div class="addtionalDivTwo">
						<div class="addtionalDivThree">
							<div id="slot">
								<iframe id="iframe"></iframe>
							</div>
						</div>	
					</div>
				</div>
			</div>	  
		</div>
	</section>
</div>

Tests:

ID
let el1 = document.getElementById('iframe'); let el2 = document.getElementById('wrapper');
Closest
let el1 = document.getElementById('iframe'); let el2 = el1.closest('.wrapper');
Parent Node
let el1 = document.getElementById('iframe'); let el2 = el1.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID
Closest
Parent Node

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

**Benchmark Definition:**

The Benchmark Definition is a JSON object that provides information about the test case. It includes two parts:

1. **Script Preparation Code**: This section is empty, which means no custom JavaScript code is provided to prepare for the benchmark.
2. **Html Preparation Code**: The HTML preparation code is a string that represents an HTML document with multiple `<section>` elements containing similar structures (e.g., `<div class="adSlotContainer">`).

**Individual Test Cases:**

The test cases are defined in an array, and each object contains two properties:

1. **Benchmark Definition**: This section defines the JavaScript code that performs the desired operation on a specific HTML element.
2. **Test Name**: This property provides a human-readable name for the test case.

There are three test cases:

* **ID**: Retrieves an `<iframe>` element using `document.getElementById('iframe')` and then tries to retrieve another element (`el2`) using `el1`. (Note: There seems to be a typo in the original code, as it should likely use `el1` instead of `el2`)
* **Closest**: Similar to the previous one, but uses `closest()` method to find an ancestor with the class `.wrapper`.
* **Parent Node**: Retrieves an `<iframe>` element and then tries to retrieve another element (`el2`) using a series of `parentNode` calls.

**Library and Purpose:**

There is no explicitly mentioned library in the Benchmark Definition or test cases. However, it's likely that the HTML preparation code uses some libraries for rendering or manipulating HTML elements (e.g., jQuery or Vanilla JavaScript).

**Latest Benchmark Result:**

The latest benchmark result provides information about the browser and device used to execute each test case, along with the number of executions per second.

In this case:

* **Parent Node**: Chrome 103 on a desktop Windows device executed 4110782.5 times per second.
* **Closest**: Chrome 103 on a desktop Windows device executed 2934775.25 times per second.
* **ID**: Chrome 103 on a desktop Windows device executed 2794721.75 times per second.

**Key Takeaways:**

This benchmark is testing the performance of different methods for retrieving DOM elements:

* `document.getElementById()`: Fastest, but may not always find the intended element (due to typos or inconsistencies).
* `closest()`: Similar performance to `document.getElementById()`, but with the added benefit of finding ancestors.
* `parentNode` chaining: Slower due to the repeated calls.

The benchmark result highlights the importance of using the most efficient method for retrieving DOM elements, depending on the specific use case.

Related benchmarks:

New test (version: 0)

Comparing performance of: ID vs Closest vs Parent Node

Created: 3 years ago by: Guest

Jump to the latest result

ID

Closest

Parent Node

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):