Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
DocumentFragment append VS Normal append
Code from https://johnresig.com/blog/dom-documentfragments/
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=570072" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36
Browser:
Chrome Mobile 131
Operating system:
Android
Device Platform:
Mobile
Date tested:
one year ago
Test name
Executions per second
DocumentFragment append
2.8 Ops/sec
Normal append
0.3 Ops/sec
HTML Preparation code:
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
Script Preparation code:
var elems = [ document.createElement("hr"), text(document.createElement("b"), "Links:"), document.createTextNode(" "), text(document.createElement("a"), "Link A"), document.createTextNode(" | "), text(document.createElement("a"), "Link B"), document.createTextNode(" | "), text(document.createElement("a"), "Link C") ]; function text(node, txt) { node.appendChild(document.createTextNode(txt)); return node; } var div = document.getElementsByTagName("div");
Tests:
DocumentFragment append
const fragment = document.createDocumentFragment(); for (let e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } for (let i = 0; i < div.length; i++) { div[i].appendChild(fragment.cloneNode(true)); }
Normal append
for (let i = 0; i < div.length; i++) { for (let e = 0; e < elems.length; e++) { div[i].appendChild(elems[e].cloneNode(true)); } }