Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test remove node performance (with new nodes added)
(version: 0)
I suspect .textContent = '' should be faster, why are benchmarks saying it isn't? It makes no sense. So let's try adding nodes to clean up?
Comparing performance of:
textContent vs removeChild
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test'></div>
Script Preparation code:
var el = document.getElementById('test');
Tests:
textContent
let node = document.getElementById('test'); for (let i = 0; i < 1000; ++i) el.appendChild(document.createElement('div')); node.textContent = '';
removeChild
let node = document.getElementById('test'); for (let i = 0; i < 1000; ++i) el.appendChild(document.createElement('div')); while(node.firstChild) { node.removeChild(node.firstChild); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
textContent
removeChild
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Browser/OS:
Chrome 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=593267" width="100%" height="500px"></iframe>
textContent
735/s
removeChild
198/s
View exact numbers
Test name
Executions per second
✓
textContent
735 Ops/sec
removeChild
198 Ops/sec
Autogenerated LLM Summary
(model
llama3.1:latest
, generated one year ago):
Let's break down the benchmark definition and the test cases. **Benchmark Definition** The benchmark is called "Test remove node performance (with new nodes added)" with a description suggesting that it's testing whether setting `textContent` to an empty string is faster than removing child nodes using `removeChild`. **Script Preparation Code** This code sets up a DOM element with the ID "test" in the HTML preparation code. **Html Preparation Code** A simple HTML snippet creates a `<div>` element with the ID "test". **Individual Test Cases** There are two test cases: 1. **textContent** * This test case creates a node (an element) using `document.getElementById('test')`. * It then appends 1000 new `<div>` elements to the existing node. * Finally, it sets the `textContent` property of the original node to an empty string (`''`). 2. **removeChild** * This test case is similar to the first one: it creates a node and appends 1000 new `<div>` elements. * However, instead of setting `textContent`, it uses a while loop to remove all child nodes from the original node using `removeChild`. **Latest Benchmark Result** The results show two browsers (Chrome 118) running both test cases. The numbers indicate how many times each test case can execute per second: 1. **textContent**: approximately 519 executions per second 2. **removeChild**: approximately 436 executions per second Now, let's discuss the options being compared and their pros/cons. **Comparing Options** The benchmark is testing two approaches to removing nodes: 1. **Setting `textContent` to an empty string (`''`)**: * Pros: simple, concise code * Cons: may not work as expected if child nodes contain formatting or layout information (e.g., spacing, padding) 2. **Using a while loop with `removeChild`**: * Pros: more reliable for removing all child nodes and maintaining their layout/spacing * Cons: slightly longer code and potentially slower performance due to the additional loop Other considerations: * The benchmark is testing both methods on a specific scenario (adding 1000 new nodes before removing them). * The results suggest that setting `textContent` might be faster, but only by about 15% in this particular case. **Library/Feature Usage** No external libraries or special JavaScript features are used in this benchmark. **Alternatives** Other alternatives for removing child nodes include: 1. **Using `innerHTML`**: This method can replace all child nodes with a new string of HTML, which might be faster than individual node removals. 2. **Utilizing `querySelectorAll` and `removeChild`**: If you need to remove specific types of nodes (e.g., elements with a certain class), this approach can be more efficient. Keep in mind that the best approach depends on your specific use case and performance requirements.
Related benchmarks
textContent vs removechild vs remove!
innerhtml vs removechild vs remove vs innerText vs textContent
Comments
Confirm delete:
Do you really want to delete benchmark?