Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
appendChild vs. insertAdjacentHTML
(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; } const ui = 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; } const ui = 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):
Measuring the performance of JavaScript microbenchmarks, such as those found on MeasureThat.net, involves analyzing and comparing different approaches to accomplish a specific task. The benchmark provided measures the performance difference between using `appendChild` and `insertAdjacentHTML` methods when creating a dialog box with an image in it. Here's what each option is about: **Option 1: Appending elements to the document body** In this approach, you create a new element (in this case, a dialog box) and append it to the end of the document body using `appendChild`. This method can lead to performance issues if not used carefully, as it involves creating a new DOM tree node every time. Pros: * Simple to implement * Works well for small number of elements Cons: * Can be slow for large numbers of elements due to frequent DOM mutations * May cause layout issues or other problems if not done correctly **Option 2: Using `insertAdjacentHTML`** In this approach, you use the `insertAdjacentHTML` method to insert an HTML string directly into the document. This method is more efficient than appending individual elements because it reduces the number of DOM mutations. Pros: * Fast and efficient * Reduces DOM mutations, which can be expensive operations Cons: * May require additional JavaScript parsing or compilation steps (although this is usually handled by the browser) * Can only be used with specific element types that support `insertAdjacentHTML` (e.g., HTML elements) Other considerations: * The `DocumentFragment` class is used in both test cases to create a placeholder for the dialog box. This allows the `appendChild` method to work correctly, as it doesn't have to create a new DOM tree node from scratch. * JavaScript features like `let`, `const`, and template literals are used throughout the benchmark to define variables and expressions. To use these approaches, you would typically: 1. Create an HTML file with the necessary elements (in this case, a dialog box and image). 2. Write JavaScript code that uses either the `appendChild` or `insertAdjacentHTML` method to create the dialog box. 3. Test the performance of your implementation using a tool like MeasureThat.net. Alternatives to these approaches include: * Using a library like React or Angular, which provide their own optimized methods for creating and manipulating DOM elements. * Utilizing other JavaScript libraries or frameworks that provide more efficient DOM manipulation APIs (e.g., Vue.js). * Implementing custom DOM manipulation logic using WebAssembly or native code (although this is usually overkill unless you have very specific performance requirements).
Related benchmarks:
insertAdjacentHtml vs innerHTML - Replace
appendChild vs. insertAdjacentHTML x1000
appendChild v. insertAdjacentHTML
insertAdjacentHtml vs createContextualFragment
Comments
Confirm delete:
Do you really want to delete benchmark?