Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML vs appendchild vs append
(version: 0)
Comparing performance of:
insertAdjacentHTML vs appendchild vs append
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="case"></div>
Tests:
insertAdjacentHTML
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="piccha" class="pics__image js-pics__image" src="" ><div class="pics__panel"><h2 class="pics__title"></h2><p class="pics__text"></p></div></a>' let newElement = ''; for (i = 0; i < 1000; i++) { newElement += testNodeHtml; } cont.insertAdjacentHTML("beforeend", newElement);
appendchild
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 1000; i++) { cont.appendChild(testNode) }
append
const item = document.createElement('a'); const image = document.createElement('img'); const panel = document.createElement('div'); const title = document.createElement('h2'); const text = document.createElement('p'); item.className = 'pics__item js-pics__item pics__item_empty js-pics__item_empty'; image.className = 'pics__image js-pics__image'; panel.className = 'pics__panel'; title.className = 'pics__title js-pics__title'; text.className = 'pics__text js-pics__text'; panel.append(title, text); item.append(image, panel); const testNode = item; const cont = document.querySelector("#case"); for (i = 0; i < 1000; i++) { cont.append(testNode) }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
insertAdjacentHTML
appendchild
append
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 break down the provided benchmark and explain what each test case is measuring. **Benchmark Overview** The benchmark compares the performance of three approaches for inserting HTML content into a DOM node: 1. `insertAdjacentHTML` 2. `appendChild` (also known as `append`) 3. `appendChild` These approaches differ in how they add new elements to the DOM tree, which can impact performance. **Test Case 1: insertAdjacentHTML** This test case measures the performance of using `insertAdjacentHTML` to append a large amount of HTML content to a `div` element with the id `case`. Here's what happens: * The script creates a `testNodeHtml` string containing HTML elements (e.g., `<a>`, `<img>`, `<div>`) repeated 1000 times. * The script appends this HTML content to the `#case` `div` element using `insertAdjacentHTML`. The purpose of this test case is to measure the performance of inserting large amounts of HTML content into the DOM tree using `insertAdjacentHTML`. **Test Case 2: appendChild** This test case measures the performance of using `appendChild` (or `append`) to add a large amount of HTML content to a `div` element with the id `case`. Here's what happens: * The script creates a `testNodeHtml` string containing HTML elements (e.g., `<a>`, `<img>`, `<div>`) repeated 1000 times. * The script appends this HTML content to the `#case` `div` element using `appendChild`. The purpose of this test case is to measure the performance of inserting large amounts of HTML content into the DOM tree using `appendChild`. **Test Case 3: append** This test case measures the performance of using a non-standard, older method of appending content to an element (`append`) compared to `appendChild`. Note that `append` is not a standard method in modern JavaScript and may not work across all browsers. Here's what happens: * The script creates a `testNodeHtml` string containing HTML elements (e.g., `<a>`, `<img>`, `<div>`) repeated 1000 times. * The script appends this HTML content to the `#case` `div` element using `append`. The purpose of this test case is to measure the performance of inserting large amounts of HTML content into the DOM tree using an older, non-standard method (`append`). **Library and Special JS Features** None of these tests use a specific library or special JavaScript feature. They focus solely on comparing the performance of three different approaches for inserting HTML content into the DOM tree. **Other Considerations** When measuring the performance of inserting large amounts of HTML content into the DOM tree, other factors to consider include: * Memory allocation and garbage collection * Browser rendering and layout * Event handling and bubbling These tests only measure the raw execution time, so additional tests might be needed to consider these other factors. **Alternative Approaches** Other approaches for inserting HTML content into the DOM tree might include: * Using `innerHTML` or `outerHTML` to replace existing content * Using a library like jQuery or React to handle DOM updates * Using Web Workers or WebAssembly to offload rendering tasks However, these tests specifically focus on comparing the performance of three standard approaches: `insertAdjacentHTML`, `appendChild`, and `append`.
Related benchmarks:
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement
innerHTML vs insertAdjacentHTML template
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElementasd
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement 2
insertAdjacentHtml vs innerHTML (no initial contents)
Comments
Confirm delete:
Do you really want to delete benchmark?