Benchmark: WebComponent rendering

HTML Preparation code:

<template id="component">
    <div id="header">
        <h3 id="title">{{ title }}</h3>
        <h4 id="sub-title">Written by life</h4>
    </div>

    <div id="body">
        <slot></slot>
      	<button id="button">click me</button>
    </div>
</template>

<template id="content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Amet aperiam corporis culpa deserunt dicta distinctio iste
        laboriosam laudantium modi, molestiae molestias necessitatibus
        neque nihil nisi omnis praesentium quam saepe totam ut velit.
        Adipisci architecto atque dignissimos doloremque dolores ex
        impedit in inventore nemo nulla repudiandae sequi veritatis
        voluptas voluptate, voluptatibus?
    </p>
</template>

<div id="wrapper" hidden></div>

Script Preparation code:

const fillTitle = shadow => {
    shadow.getElementById('title').textContent = 'Lorem ipsum dolor sit amet';
};

const attachEvents = shadow => {
    const button = shadow.getElementById('button');
    button.addEventListener('mousedown', () => {});
    button.addEventListener('mouseup', () => {});
    button.addEventListener('click', () => {});
    button.addEventListener('dragstart', () => {});
    button.addEventListener('dragend', () => {});
    button.addEventListener('dragcancel', () => {});
    button.addEventListener('dragmove', () => {});
    button.addEventListener('custom', () => {});
};

const renderWithHTML = shadow => {
    shadow.innerHTML = document.getElementById('component').innerHTML;
};
const renderWithClone = shadow => {
    shadow.appendChild(document.getElementById('component').content.cloneNode(true));
};

const wrapper = document.getElementById('wrapper');
const content = document.getElementById('content').innerHTML;

const examplesHTML = `<my-component-a>${ content }</my-component-a>`.repeat(5000);
const examplesClone = `<my-component-b>${ content }</my-component-b>`.repeat(5000);

class MyComponent extends HTMLElement {
    render() {};

    constructor() {
        super();
        const shadow = this.attachShadow({
            mode: 'open'
        });
        this.render(shadow);

        fillTitle(shadow);
        attachEvents(shadow);
    }
}

class MyComponentA extends MyComponent {
    render(shadow) {
      return renderWithHTML(shadow);
    };
}
class MyComponentB extends MyComponent {
    render(shadow) {
      return renderWithClone(shadow);
    };
}

window.customElements.get('my-component-a') || customElements.define('my-component-a', MyComponentA);
window.customElements.get('my-component-b') || customElements.define('my-component-b', MyComponentB);

window.renderTestHTMLString = () => wrapper.innerHTML = examplesHTML;
window.renderTestCloneNode = () => wrapper.innerHTML = examplesClone;

Tests:

HTML string
renderTestHTMLString();
Clone node
renderTestCloneNode();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
HTML string
Clone node

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: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/119.0

Browser/OS: Firefox 119 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
HTML string	12.0 Ops/sec
Clone node	12.3 Ops/sec

WebComponent rendering (version: 7)

Comparing performance of: HTML string vs Clone node

Created: one year ago by: Registered User

Jump to the latest result

HTML string

Clone node

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A