Run results for: virtual node function VS innerHTML VS html string VS cached virtual node

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser: Chrome 91

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Html String (append)	890936.4 Ops/sec
html string (innerHTML)	17416.7 Ops/sec
virtual node function	15922.7 Ops/sec
Clone cached vnode	123397.1 Ops/sec

HTML Preparation code:

<div id='parent'></div>

Script Preparation code:

// @BotDamian
// Twitter @NerdDamian
// Video https://d.tube/#!/c/botdamian00

function n(tag, args, content){
    const el = document.createElement(tag)

    if(args){
        // Handle arguments
        for(key in args){
            const value = args[key]
            console.log(key, value);
        }
    }

    if(content){
        if(typeof content === 'string'){
            el.textContent = content
        }else if(content instanceof Array){
            el.append(...content)
        }else{
            el.appendChild(content)
        }
    }

    return el
}

var templateHtml = x => `<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>`

function clear(node){
    while(node.lastChild) node.removeChild(node.lastChild) 
}

var cachedVnode = n('div', {className: 'video'}, [
    n('div', {className: 'preview'}, [
        n('img', {className: 'thumbnail', src: "https://i.ytimg.com/vi/XGHdPHWYdGA/mqdefault.jpg"}),
        n('div', {className: 'votingpower'}, [
            n('i', {className: ['icon', 'bolt']}),
            '69'
        ]),
        n('div', {className: 'videotime'}, '04:20')
    ]),
    n('div', {className: 'info'}, [
        n('div', {className: 'title'}, 'Chase & Taylor Stunning Wedding Day Teaser'),
        n('div', {className: 'username'}, 'captainbob'),
        n('div', {className: 'stats'}, [
            n('div', {className: 'dtc'}, '63'),
            n('div', {className: 'time'}, '6 hours ago')
        ])
    ])
])

var parent = document.getElementById('parent')

var vparent = document.createElement('div')

Tests:

Html String (append)
parent.append('<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>') clear(parent)
html string (innerHTML)
parent.innerHTML = '<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>' clear(parent)
virtual node function
parent.appendChild(n('div', {className: 'video'}, [ n('div', {className: 'preview'}, [ n('img', {className: 'thumbnail', src: "https://i.ytimg.com/vi/XGHdPHWYdGA/mqdefault.jpg"}), n('div', {className: 'votingpower'}, [ n('i', {className: ['icon', 'bolt']}), '69' ]), n('div', {className: 'videotime'}, '04:20') ]), n('div', {className: 'info'}, [ n('div', {className: 'title'}, 'Chase & Taylor Stunning Wedding Day Teaser'), n('div', {className: 'username'}, 'captainbob'), n('div', {className: 'stats'}, [ n('div', {className: 'dtc'}, '63'), n('div', {className: 'time'}, '6 hours ago') ]) ]) ])) clear(parent)
Clone cached vnode
var cloned = cachedVnode.cloneNode(true) parent.appendChild(cloned) clear(parent)
vparent (append)
parent.append('<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>') clear(parent)
vparent (innerHTML)
vparent.innerHTML = '<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>' clear(parent)
vparent appendChild
vparent.appendChild(n('div', {className: 'video'}, [ n('div', {className: 'preview'}, [ n('img', {className: 'thumbnail', src: "https://i.ytimg.com/vi/XGHdPHWYdGA/mqdefault.jpg"}), n('div', {className: 'votingpower'}, [ n('i', {className: ['icon', 'bolt']}), '69' ]), n('div', {className: 'videotime'}, '04:20') ]), n('div', {className: 'info'}, [ n('div', {className: 'title'}, 'Chase & Taylor Stunning Wedding Day Teaser'), n('div', {className: 'username'}, 'captainbob'), n('div', {className: 'stats'}, [ n('div', {className: 'dtc'}, '63'), n('div', {className: 'time'}, '6 hours ago') ]) ]) ])) clear(parent)
vparent cloneNode
var cloned = cachedVnode.cloneNode(true) vparent.appendChild(cloned) clear(parent)
Control run coz i dont believe that innerHTML is slower.
parent.append('<div class="video"><div class="preview"><img src="https://d.tube/#!/c/botdamian00" alt="" class="thumbnail"><div class="votingpower"><i class="icon bolt"></i>69</div><div class="videotime">04:20</div></div><div class="info"><div class="title">Chase & Taylor Stunning Wedding Day Teaser</div><div class="username">captainbob</div><div class="stats"><div class="dtc">63</div><div class="time">6 hours ago</div></div></div></div>') clear(parent)
template string function
parent.append(templateHtml()) clear(parent)

Run results for: virtual node function VS innerHTML VS html string VS cached virtual node

Html String (append)

html string (innerHTML)

virtual node function

Clone cached vnode

vparent (append)

vparent (innerHTML)

vparent appendChild

vparent cloneNode

Control run coz i dont believe that innerHTML is slower.

template string function