Benchmark: appendChild v. insertAdjacentHTML

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 = doc.body.appendChild(doc.createElement('dialog')); this.#dlg.id = 'dlg'; this.#dlg.className = 'fit'; this.#img = this.#dlg.appendChild(new Image()); } #dlg; #img; } const ui = new UI(document);
appendChild 2
class UI { constructor(doc){ this.#dlg = doc.body.appendChild(doc.createElement('dialog')); this.#dlg.id = 'dlg'; this.#dlg.className = 'fit'; this.#img = this.#dlg.appendChild(document.createElement('img')); } #dlg; #img; } const ui = new UI(document);
appendChild 3
class UI { constructor(doc){ this.#dlg = doc.body.appendChild(Object.assign(doc.createElement('dialog'),{id:'dlg',className:'fit'})); this.#img = this.#dlg.appendChild(new Image()); } #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>

Previous results

Test case name	Result
appendChild
appendChild 2
appendChild 3
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!

Related benchmarks:

appendChild v. insertAdjacentHTML (version: 0)

Comparing performance of: appendChild vs appendChild 2 vs appendChild 3 vs insertAdjacentHTML

Created: 3 years ago by: Guest

Jump to the latest result

appendChild

appendChild 2

appendChild 3

insertAdjacentHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results