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; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Chrome 107
Windows
Desktop
2 years ago
Test name Executions per second
createElement 1268.4 Ops/sec
cloneNode (deep) 7.9 Ops/sec
innerHTML 1232.7 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;
    }