MeasureThat.net

Run results for: createElement vs cloneNode vs innerHTML for multi elements with optimized loops

Faster way to create new dom elements before insertion

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; rv:106.0) Gecko/20100101 Firefox/106.0
Firefox 106
Windows
Desktop
2 years ago
Test name Executions per second
createElement 1001.0 Ops/sec
cloneNode (deep) 4.7 Ops/sec
innerHTML 1084.3 Ops/sec
Tests:

  • createElement

    ​x
     
    const list = [];
    let n = 0;
    ​
    const div = document.createElement('div');
    const div2 = document.createElement('div');
    const div3 = document.createElement('div');
    const p = document.createElement('p');
    div2.classList.add('two');
    div3.classList.add('three');
    p.classList.add('font-bold');
    p.textContent = 'Hello!';
    div.appendChild(div2);
    div2.appendChild(div3);
    div3.appendChild(p);
    console.log(div);
    while(true) {
        n++;
        list.push(div);
        if(n===100000) 
            break;
    }

  • cloneNode (deep)

     
    const list = [];
    let n = 0;
    const div = document.createElement('div');
    const div2 = document.createElement('div');
    const div3 = document.createElement('div');
    const p = document.createElement('p');
    div2.classList.add('two');
    div3.classList.add('three');
    p.classList.add('font-bold');
    p.textContent = 'Hello!';
    div.appendChild(div2);
    div2.appendChild(div3);
    div3.appendChild(p);
    while(true) {
        n++;
        list.push(div.cloneNode(true));
        if(n===100000) 
            break;
    }

  • innerHTML

     
    const list = [];
    let n = 0;
    const div = document.createElement('div');
    div.innerHTML = '<div><div class="two3"><div class="three"><p class="font-bold">Hello!</p></div></div></div>'
    console.log(div);
    while(true) {
        n++;
        list.push(div);
        if(n===100000) 
            break;
    }