Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Fork of createElement vs insertAdjacentHTML but actually works V2 with spreading into an array
(version: 1)
Comparing performance of:
createElement vs insertAdjacentHTML
Created:
8 months ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
createElement
const elemTpl = document.createElement("div"); elemTpl.classList.add("testClass"); newElement = document.createElement("div"); newElement.id = "testing"; const arr = new Array(); for (i = 0; i < 1000; i++) { arr.push(elemTpl.cloneNode(true)); } newElement.append(...arr); document.getElementById("test").appendChild(newElement);
insertAdjacentHTML
html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
createElement
insertAdjacentHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months 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
Test name
Executions per second
createElement
1839.5 Ops/sec
insertAdjacentHTML
1703.7 Ops/sec
Related benchmarks:
createElement vs insertAdjacentHTML but actually works
createElement vs insertAdjacentHTML but actually works V2
insertAdjacentHTML with outerHTML vs append with CloneNode
insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild
append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment
append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment vs append documentFragment
insertAdjacentHTML VS append VS appendChild (createDocumentFragment)
createElement vs cloneNode vs innerHTML for multi elements
createElement vs cloneNode vs innerHTML for multi elements with optimized loops
Comments
Confirm delete:
Do you really want to delete benchmark?