Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
no name
(version: 0)
Comparing performance of:
1 vs 2 vs 3
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<p id="foo"> <span>hello</span> <div>world</div> </p>
Tests:
1
var node = document.querySelectorAll("#foo"); for (let i = 0; i < node.length; i++) { node[i].innerHTML = ''; }
2
var node = document.querySelectorAll("#foo"); for (let i = 0; i < node.length; i++) { node[i].parentNode.removeChild(node[i]); }
3
var node = document.querySelectorAll("#foo"); for (let i = 0; i < node.length; i++) { node[i].innerHTML = ''; node[i].parentNode.removeChild(node[i]); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
1
2
3
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
gemma2:9b
, generated one year ago):
This benchmark tests the performance of three different ways to remove HTML elements from the webpage. Let's break down each test case: * **Test 1:** `node[i].innerHTML = '';` - This approach simply clears the content (text and tags) within each element selected by `document.querySelectorAll("#foo")`. * **Pros:** Simplest method, potentially faster if you only need to remove content without restructuring the DOM. * **Cons:** Does not actually remove the elements from the DOM tree, meaning they still consume memory and could potentially interfere with other operations. * **Test 2:** `node[i].parentNode.removeChild(node[i]);` - This approach removes each element entirely from the DOM tree using its parent node's `removeChild()` method. * **Pros:** Effectively removes elements, freeing up memory and potentially improving performance for large lists of elements. * **Cons:** Might be slightly slower than clearing content alone due to the extra DOM manipulation involved. * **Test 3:** Combines both methods: `node[i].innerHTML = '';` followed by `node[i].parentNode.removeChild(node[i]);`. * **Pros:** Offers the potential benefit of Test 1 and Test 2, but it's important to consider whether clearing content first is truly necessary in this scenario. * **Cons:** Might be slower than Test 2 alone due to the extra step of clearing content. **Other Considerations:** * The results on MeasureThat.net likely show executions per second, indicating how many times each test can successfully remove elements within a given time period. * Different browsers and environments might yield different performance results due to variations in JavaScript engines and DOM implementations. Let me know if you have any other questions or want to explore specific aspects in more detail!
Related benchmarks:
innerHTML vs removeChild
JQuery: find vs id selector
asdasdasd213423
TreeWalker
JQuery: find vs selector vs scoped selector
Comments
Confirm delete:
Do you really want to delete benchmark?