Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
appendChild vs. insertAdjacentHTML x1000
(version: 0)
Comparing performance of:
appendChild vs insertAdjacentHTML
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div><div><div></div></div></div> <div></div> <a href='#' /> <div></div> <div></div> <div><div><div></div></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:
for(let i of [Document,DocumentFragment,Element]){ i.prototype.$=i.prototype.querySelector; i.prototype.$$=function(s){return[...this.querySelectorAll(s)]}; }
Tests:
appendChild
class UI { constructor(doc){ this.#dlg = document.createElement('dialog'); this.#dlg.id = 'dlg'; this.#dlg.className = 'fit'; this.#img = this.#dlg.appendChild(new Image()); document.body.appendChild(this.#dlg); } #dlg; #img; } for (i = 0; i < 1000; i++) new UI(document);
insertAdjacentHTML
class UI { constructor(doc){ doc.body.insertAdjacentHTML('beforeend',`<dialog id="dlg" class="fit"><img></dialog>`); this.#dlg = doc.body.$('#dlg'); this.#img = this.#dlg.$('img'); } #dlg; #img; } for (i = 0; i < 1000; i++) new UI(document);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
appendChild
insertAdjacentHTML
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net! **What is tested?** The provided benchmark tests two approaches to appending or inserting HTML content into a document: 1. `appendChild`: This method adds the specified element as a child of another element, in this case, a `div` element. 2. `insertAdjacentHTML`: This method inserts a string representing an HTML fragment (in this case, a dialog element with an image) at a specific position relative to the target element. **Options compared** The benchmark compares the performance of these two approaches on various elements: * `Document` object * `DocumentFragment` object * Native `Element` objects **Pros and Cons** Here's a brief summary of each approach: 1. **appendChild** * Pros: + Well-established, widely supported method. + Can be used to dynamically add content to the DOM. * Cons: + May lead to slower performance compared to `insertAdjacentHTML` for large amounts of content. 2. **insertAdjacentHTML** * Pros: + Faster performance compared to `appendChild` for large amounts of content. + Reduces DOM manipulation overhead by inserting a pre-formed HTML string directly into the DOM. **Library and purpose** The benchmark uses the `Element.prototype.$=` property, which is not a standard property. However, it's possible that this property is defined in a custom library or framework being tested. Unfortunately, without more information about the specific library or context, I couldn't provide further details. **Special JavaScript features or syntax** There are no special JavaScript features or syntax mentioned in the benchmark definition or test cases. **Other alternatives** If you're interested in exploring alternative approaches to appending or inserting content into a document, here are some options: * `insertBefore()`: Similar to `appendChild`, but inserts the specified element before another element. * `createElement()`: Creates a new HTML element using the DOM API. * `innerHTML` property: Sets or gets the inner HTML of an element. Keep in mind that each approach has its own trade-offs and considerations, and the choice ultimately depends on your specific use case and requirements.
Related benchmarks:
ParentNode.append() vs Node.appendChild() for adding a couple elements
appendChild vs. insertAdjacentHTML
appendChild v. insertAdjacentHTML
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?