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: 4 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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

The latest benchmark results are in!

Let's summarize the key findings:

1. **vparent (append)**: This test shows that appending to a virtual parent element is the fastest method, with an execution rate of 924872 executions per second.
2. **Html String (append)**: Appending from an HTML string is slightly slower than appending to a virtual parent element, but still relatively fast at 914854 executions per second.
3. **Control run coz i dont believe that innerHTML is slower**: This test confirms that using `innerHTML` is not the slowest method, with an execution rate of 669110 executions per second.
4. **vparent cloneNode**: Cloning a virtual parent element is faster than appending to it, but still relatively fast at 200618 executions per second.
5. **Clone cached vnode**: This test shows that cloning a cached vnode (a pre-built DOM structure) is the slowest method, with an execution rate of 140363 executions per second.
6. **html string (innerHTML)**: Using an HTML string with `innerHTML` is relatively fast at 20763 executions per second.
7. **vparent (innerHTML)**: Appending to a virtual parent element using `innerHTML` is slightly slower than just appending, but still relatively fast at 20157 executions per second.
8. **vparent appendChild**: This test shows that appending to a virtual parent element via the `appendChild` method is slower than simply appending, with an execution rate of 7401 executions per second.

Overall, it seems that appending directly to a virtual parent element or using an HTML string with `innerHTML` are the fastest methods, while cloning a cached vnode and using `appendChild` are the slowest.

Related benchmarks: