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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0

Browser/OS: Firefox 112 on Windows

View result in a separate tab

Test name	Executions per second
appendChild	4257.5 Ops/sec
appendChild 2	1876.1 Ops/sec
appendChild 3	1733.5 Ops/sec
insertAdjacentHTML	1497.9 Ops/sec

appendChild v. insertAdjacentHTML (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

appendChild

appendChild 2

appendChild 3

insertAdjacentHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A