Run results for: WebComponent rendering

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser: Chrome 128

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Clone node

10/s

HTML string

5/s

View exact numbers

Test name	Executions per second
✓ Clone node	10 Ops/sec
HTML string	5 Ops/sec

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();