Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
firstChild vs lastChild
(version: 0)
Comparing performance of:
while firstChild removeChild firstChild vs while firstChild removeChild lastChild
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id='box'></div>
Script Preparation code:
var box = document.getElementById('box'); box.innerHTML = 'sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>s f</b>s df<p>df gsdfg sf g<b>'
Tests:
while firstChild removeChild firstChild
while (box.firstChild) { box.removeChild(box.firstChild); }
while firstChild removeChild lastChild
while (box.firstChild) { box.removeChild(box.lastChild); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
while firstChild removeChild firstChild
while firstChild removeChild lastChild
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Browser/OS:
Chrome 109 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
while firstChild removeChild firstChild
56190748.0 Ops/sec
while firstChild removeChild lastChild
57009852.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll dive right in and explain the benchmark. **Benchmark Overview** The provided JSON represents two test cases, both measuring the performance of removing child nodes from an HTML element using different approaches: `firstChild` and `lastChild`. **Benchmark Definition** The benchmark definition is a JavaScript function that defines the operation to be performed. The first test case uses `while (box.firstChild) { box.removeChild(box.firstChild); }`, which repeatedly removes the first child node of the `box` element until it's empty. The second test case uses `while (box.lastChild) { box.removeChild(box.lastChild); }`, which does the same thing but for the last child node. **Html Preparation Code** The HTML preparation code is a simple `<div>` element with an ID of "box" that will be used as the target element for the benchmark operations. **Individual Test Cases** There are two individual test cases: 1. **while firstChild removeChild firstChild**: This test case measures the performance of removing child nodes using `firstChild`. 2. **while firstChild removeChild lastChild**: This test case measures the performance of removing child nodes using `lastChild`. **Latest Benchmark Result** The latest benchmark result shows the execution times for each test case: 1. **while firstChild removeChild firstChild**: 1363653.375 executions per second 2. **while firstChild removeChild lastChild**: 1097270.875 executions per second These results suggest that removing child nodes using `firstChild` is slightly faster than removing them using `lastChild`. **Performance Comparison** To compare the performance of these two approaches, we can analyze why one might be slower than the other: * Using `firstChild` to remove nodes may lead to more overhead due to the need to traverse the entire DOM tree from the root node down to find the first child. * Using `lastChild` may be faster because it only requires traversing from the last node in the list of children back up to the parent element. However, these are general observations and actual performance can vary depending on specific use cases and browser implementations. **Conclusion** In summary, this benchmark measures the performance of removing child nodes using `firstChild` and `lastChild`. The results suggest that `firstChild` is slightly faster than `lastChild`, but the difference is relatively small.
Related benchmarks:
document.getElementById vs GetChildElementById
document.getElementById vs GetChildElementById
EventListener in parent vs EventListener in childs
Node parent walking vs node contains 2
Comments
Confirm delete:
Do you really want to delete benchmark?