MeasureThat.net

Run results for: appendChild v. insertAdjacentHTML

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0
Firefox 112
Windows
Desktop
one year ago
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
HTML Preparation code:
AخA
 
1
<div><div><div></div></div></div>
2
<div></div>
3
<a href='#' />
4
<div></div>
5
<div></div>
6
<div><div><div></div></div></div>
7
<div></div>
8
<div><div></div></div>
9
<div><div></div></div>
10
<div><div><div><div></div></div></div></div>
11
<div></div>
12
<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);