Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Append children VS appendChild in loop VS replaceChildren moar
(version: 1)
Comparing performance of:
append vs appendChild in loop vs replaceChildren
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="root"></div>
Script Preparation code:
const root = document.getElementById('root'); const numChildren = 100; const children = []; for (let i = 0; i < numChildren; i++) { children[i] = document.createElement('span'); }
Tests:
append
root.append(...children);
appendChild in loop
for (let i = 0; i < numChildren; i++) { root.appendChild(children[i]); }
replaceChildren
root.replaceChildren(...children)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
append
appendChild in loop
replaceChildren
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; rv:141.0) Gecko/20100101 Firefox/141.0
Browser/OS:
Firefox 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=615191" width="100%" height="500px"></iframe>
appendChild in loop
948/s
replaceChildren
383/s
append
374/s
View exact numbers
Test name
Executions per second
✓
appendChild in loop
948 Ops/sec
replaceChildren
383 Ops/sec
append
374 Ops/sec
Related benchmarks
childNodes vs children vs firstChild vs firstElementChild
Spread vs Array.from on NodeList
Append children or appendChild in loop
Append children VS appendChild in loop VS replaceChildren
replaceChildren vs while w/ appendChild 2
Test (while or forEach)
Comments
Confirm delete:
Do you really want to delete benchmark?