Benchmark: insertAdjacentHTML vs appendchild vs append(5)

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="" 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 < 30; i++) { newElement += testNodeHtml; } cont.insertAdjacentHTML("beforeend", newElement);
appendchild
function createNode() { 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); return item } const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.appendChild(createNode()) }
append [separately]
function createNode() { 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); return item } const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.append(createNode()) }
insertAdjacentHTML [separately]
const cont = document.querySelector("#case"); const testNodeHtml = '<a class="pics__item js-pics__item js-pics__item_empty"><img alt="" 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 < 30; i++) { cont.insertAdjacentHTML("beforeend", testNodeHtml); }
append
function createNode() { 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); return item } const cont = document.querySelector("#case"); const testNodes = []; for (i = 0; i < 30; i++) { testNodes.push(createNode()) } cont.append(...testNodes)
append [cloneNode] [separatly]
function createNode() { 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); return item } const testNode = createNode() const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.append(testNode.cloneNode(true)) }
appendChild [cloneNode]
function createNode() { 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); return item } const testNode = createNode() const cont = document.querySelector("#case"); for (i = 0; i < 30; i++) { cont.appendChild(testNode.cloneNode(true)) }
append [cloneNode]
function createNode() { 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); return item } const testNode = createNode(); const cont = document.querySelector("#case"); const testNodes = []; for (i = 0; i < 30; i++) { testNodes.push(testNode.cloneNode(true)) } cont.append(...testNodes)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertAdjacentHTML
appendchild
append [separately]
insertAdjacentHTML [separately]
append
append [cloneNode] [separatly]
appendChild [cloneNode]
append [cloneNode]

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):

LLMs can make mistakes. Check important info.

After analyzing the provided benchmark results, I can summarize the performance of each test:

1. **append [cloneNode]**: 7197.92724609375 executions per second
2. **appendChild [cloneNode]**: 5854.3271484375 executions per second (slightly slower than append)
3. **insertAdjacentHTML**: 4250.36865234375 executions per second (much slower than append and appendChild)
4. **append [separately]**: 4179.513671875 executions per second
5. **insertAdjacentHTML [separately]**: 4028.292724609375 executions per second
6. **append**: 3929.8408203125 executions per second (similar to appendChild)
7. **appendchild**: 1835.448974609375 executions per second (slowest among all tests)

Based on these results, the order of performance from fastest to slowest is:

1. `append`
2. `appendchild`
3. `appendChild [cloneNode]`
4. `append [separately]`
5. `insertAdjacentHTML [separately]`
6. `insertAdjacentHTML`
7. `append [cloneNode]`

These results suggest that the Firefox 103 browser performs well with DOM manipulation methods like `append` and `appendChild`, but struggles with more complex methods like `insertAdjacentHTML`. The use of `[cloneNode]` seems to provide a performance boost, while separating tests (`append [separately]` and `insertAdjacentHTML [separately]`) may not offer significant advantages.

Related benchmarks:

insertAdjacentHTML vs appendchild vs append(5) (version: 0)

Comparing performance of: insertAdjacentHTML vs appendchild vs append [separately] vs insertAdjacentHTML [separately] vs append vs append [cloneNode] [separatly] vs appendChild [cloneNode] vs append [cloneNode]

Created: 3 years ago by: Guest

Jump to the latest result

insertAdjacentHTML

appendchild

append [separately]

insertAdjacentHTML [separately]

append

append [cloneNode] [separatly]

appendChild [cloneNode]

append [cloneNode]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):