Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
remove VS removeChild
(version: 0)
remove VS removeChild
Comparing performance of:
remove vs removeChild
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="wrap"> <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div> <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div> <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div> <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div> <div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div><div class="list-item"></div> </div>
Script Preparation code:
var el = document.getElementById('');
Tests:
remove
var elem = document.querySelectorAll('#wrap .list-item'); for( var i = 0; i < elem.length; i++ ){ elem[i].remove(); }
removeChild
var elem = document.querySelectorAll('#wrap .list-item'); for( var i = 0; i < elem.length; i++ ){ elem[i].parentNode.removeChild(elem[i]); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
remove
removeChild
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):
**Benchmark Overview** The provided benchmark measures the performance of removing elements from a DOM (Document Object Model) using two different approaches: `remove` and `removeChild`. The test consists of a single element with multiple child elements, which are then iterated over and removed. **Approach 1: remove** This approach uses a `for` loop to iterate over the length of the `elem` array and removes each element individually using the `remove()` method. This approach is less efficient because it requires iterating over the entire array for each removal operation. **Approach 2: removeChild** This approach uses a `for` loop to iterate over the length of the `elem` array and removes each element using the `parentNode.removeChild(elem[i])` method. This approach is more efficient because it only requires accessing the parent node once per iteration, rather than iterating over the entire array for each removal operation. **Comparison** The latest benchmark results show that Approach 2 (`removeChild`) outperforms Approach 1 (`remove`) by a significant margin. The `ExecutionsPerSecond` values indicate that Chrome 85 on Windows Desktop executes approximately 6,500 iterations per second using `remove`, whereas it executes around 1,370 iterations per second using `removeChild`. **Reasoning** This performance difference is due to the way both approaches access and manipulate the DOM elements. In Approach 2, `removeChild` only requires accessing the parent node once per iteration, which reduces the number of DOM mutations (i.e., changes to the document structure). In contrast, Approach 1 iterates over the entire array for each removal operation, resulting in more frequent DOM mutations. **Conclusion** Using `removeChild` instead of `remove` is a more efficient approach when removing elements from a DOM. This optimization can lead to improved performance and reduced resource usage, making it an essential consideration for developers working with complex DOM structures.
Related benchmarks:
innerHTML vs removeChild (firstChild and lastChild)
innerhtml vs removechild vs remove! (few child nodes)
innerhtml vs removechild vs remove 2
removeChild vs removeChild (backwards) vs children.remove vs children.remove (backwards)
remove firstChild vs remove lastChild
Comments
Confirm delete:
Do you really want to delete benchmark?