Benchmark: Only real niggaz stay on top

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="addtionalDiv">
					<div class="addtionalDiv">
						<div id="slot">
							<iframe id="iframe"></iframe>
						</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');
ParentNode
let el1 = document.getElementById('iframe'); let el2 = el1.parentNode.parentNode.parentNode.parentNode.parentNode;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ID
Closest
ParentNode

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.

I'll break down the provided benchmark data, explaining what is tested, compared, and the pros/cons of different approaches.

**Benchmark Definition**

The benchmark definition includes three test cases:

1. `let el1 = document.getElementById('iframe');\r\nlet el2 = document.getElementById('wrapper');`
	* This test case retrieves two elements using `document.getElementById()`: an iframe element (`'iframe'`) and a container element (`'wrapper'`).
	* The goal is to measure the performance of this navigation path.
2. `let el1 = document.getElementById('iframe');\r\nlet el2 = el1.closest('.wrapper');`
	* This test case retrieves two elements using `document.getElementById()` for an iframe element, and then uses `closest()` method to navigate up the DOM tree until it finds an element with a class of `'wrapper'`.
	* The goal is to measure the performance of this navigation path.
3. `let el1 = document.getElementById('iframe');\r\nlet el2 = el1.parentNode.parentNode.parentNode.parentNode.parentNode;`
	* This test case retrieves two elements using `document.getElementById()` for an iframe element, and then uses a series of `parentNode` accesses to navigate up the DOM tree until it reaches the root element.
	* The goal is to measure the performance of this navigation path.

**Comparison**

The three test cases are compared in terms of their performance (expressed as executions per second) across different browsers and devices.

**Pros/Cons**

1. `document.getElementById()`: This method retrieves an element by its ID, which can be fast but may not cover all scenarios (e.g., if the element is dynamically generated or has a complex structure).
2. `closest()` method: This method navigates up the DOM tree until it finds an element with a matching class or attribute. While it can be faster than traversing the entire tree, its performance may vary depending on the complexity of the DOM structure.
3. `parentNode` accesses: These methods traverse up the DOM tree by accessing the parent node's property. This approach can be slower than other methods, as it requires more nodes to be accessed.

**Benchmark Results**

The latest benchmark results show that:

1. `ParentNode`: This test case is the fastest across all browsers and devices (average executions per second: 643,465).
2. `Closest`: This test case is slightly slower than `ParentNode`, but still relatively fast (average executions per second: 671,951).
3. `ID`: This test case is the slowest among the three, with an average execution time of 642,466 executions per second.

**Device and Browser Variations**

The benchmark results also show variations across different devices and browsers:

1. All three test cases are faster on Chrome 103 (Desktop) than on other browsers or devices.
2. The `ParentNode` test case is the fastest on all platforms (Windows), while the `ID` test case is slower.

Overall, the benchmark highlights the importance of considering DOM traversal methods when optimizing web applications, especially for complex or dynamic content.

Related benchmarks:

Only real niggaz stay on top (version: 0)

Only real niggaz stay on top

Comparing performance of: ID vs Closest vs ParentNode

Created: 3 years ago by: Guest

Jump to the latest result

ID

Closest

ParentNode

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