Benchmark: virtual node function VS innerHTML VS html string VS cached virtual node

virtual node function VS innerHTML VS html string VS cached virtual node (version: 10)

Comparing performance of: Html String (append) vs html string (innerHTML) vs virtual node function vs Clone cached vnode vs vparent (append) vs vparent (innerHTML) vs vparent appendChild vs vparent cloneNode vs Control run coz i dont believe that innerHTML is slower. vs template string function

Created: 2 years ago by: Registered User

Jump to the latest result

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 91 on Linux

View result in a separate tab

Test name	Executions per second
Html String (append)	914854.6 Ops/sec
html string (innerHTML)	20763.5 Ops/sec
virtual node function	7160.7 Ops/sec
Clone cached vnode	140363.8 Ops/sec
vparent (append)	924872.0 Ops/sec
vparent (innerHTML)	20157.4 Ops/sec
vparent appendChild	7401.2 Ops/sec
vparent cloneNode	200618.3 Ops/sec
Control run coz i dont believe that innerHTML is slower.	669110.2 Ops/sec

virtual node function VS innerHTML VS html string VS cached virtual node (version: 10)

Comparing performance of: Html String (append) vs html string (innerHTML) vs virtual node function vs Clone cached vnode vs vparent (append) vs vparent (innerHTML) vs vparent appendChild vs vparent cloneNode vs Control run coz i dont believe that innerHTML is slower. vs template string function

Created: 2 years ago by: Registered User

Jump to the latest result

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A