Что быстрее innerHTML или createElement appendChild

// html - переводит Raw строку в строку. 
// а так же даёт подсветку html в VSCode с помощью плагина 
// lit-html https://marketplace.visualstudio.com/items?itemName=bierner.lit-html 
let html = (tsa, ...args) => String.raw(tsa, ...args); 
// -- 
const { counterConteiner, counter } = Counter(); 
document.body.innerHTML = ''; 
document.body.appendChild(counterConteiner); 
// -- 
void function () { 
    let i = 0; 
    class TestEl extends HTMLElement { 
        constructor() { 
            //@ts-ignore 
            super(...arguments); 
            this.id = '' + i++; 
            counter[this.id] = 0; 
        } 
        connectedCallback() { 
            counter[this.id]++; 
            this.innerHTML = `counter[${this.id}] ${counter[this.id]}`; 
        } 
    } 
    customElements.define('test-el', TestEl); 
}(); 
// ----------------- 
// -- 
let conteiner = document.createElement('div'); 
document.body.appendChild(conteiner); 
conteiner.innerHTML += html `<test-el> </test-el><br>`; 
conteiner.innerHTML += html `<span>-,-</span><br>`; 
conteiner.innerHTML += html `<span>-,-</span><br>`; 
// -- 
let test = conteiner.getElementsByTagName('test-el')[0]; 
test.remove(); 
conteiner.appendChild(test); 
// -- 
// ----------------- 
function Counter() { 
    let counter = new Proxy({}, { 
        set(target, key, value, receiver) { 
            try { 
                if (key in target) 
                    counterRender(key, value); 
                else { 
                    counterRender(); 
                    counterRender(key, value); 
                } 
                target[key] = value; 
            } 
            catch (_e) { 
                return false; 
            } 
            return true; 
        } 
    }); 
    let counterConteiner = document.createElement('table'); 
    let counterRender = (key, value) => { 
        if (value == 0) 
            return; 
        if (key) 
            counterConteiner.innerHTML += html ` 
            <tr> 
                <td>test-el id="${key}"</td> 
                <td>counts ${value}</td> 
            </tr>`; 
        else 
            counterConteiner.innerHTML += html ` 
            <tr> 
                <td>&nbsp;</td> 
                <td>&nbsp;</td> 
            </tr>`; 
    }; 
    return { counterConteiner, counter }; 
} 
//# sourceMappingURL=index.js.map