MeasureThat.net

Run results for: appendChild vs. insertAdjacentHTML x1000

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
2 years ago
Test name Executions per second
appendChild 3.8 Ops/sec
insertAdjacentHTML 1.6 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 = document.createElement('dialog');
            this.#dlg.id = 'dlg';
            this.#dlg.className = 'fit';
            this.#img = this.#dlg.appendChild(new Image());
            document.body.appendChild(this.#dlg);
        }
        #dlg;
        #img;
    }
    for (i = 0; i < 1000; i++) 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;
    }
    for (i = 0; i < 1000; i++) new UI(document);