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:
one year ago
by:
Guest
Go 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:
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
createElement
2K/s
insertAdjacentHTML
2K/s
View exact numbers
Test name
Executions per second
✓
createElement
1,839 Ops/sec
insertAdjacentHTML
1,704 Ops/sec
Related benchmarks
createElement vs insertAdjacentHTML but actually works
createElement vs insertAdjacentHTML but actually works V2
insertAdjacentHTML with outerHTML vs append with CloneNode vs appendChild
append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment
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?