Run results for: xxxx15 - MeasureThat.net

Test name	Executions per second
✓ funcinline	194,300 Ops/sec
func	168,237 Ops/sec
func2	150,521 Ops/sec

func

const container = document.getElementById('main');

container.appendChild(
    Attrs({ class: 'magenta' }, document.createElement('main'))
        .appendChild(
            Text(1, Attrs({ class: 'red', a: 1, b: 'ohlooong' }, document.createElement('div')))
        ).parentNode
        .appendChild(
            Attrs({ class: 'green', a: 1, b: 'ohlooong' }, document.createElement('div'))
                .appendChild(
                    Text('Wow', Attrs({ class: 'magenta', a: 1, b: 'ohlooong' }, document.createElement('div')))
                ).parentNode
        ).parentNode
        .appendChild(
            Text(3, Attrs({ class: 'blue', a: 1, b: 'ohlooong' }, document.createElement('div')))
        ).parentNode
).remove();

funcinline

const container = document.getElementById('main');

container.appendChild(
    (() => {
        const element = document.createElement('main');
        element.setAttribute('class', 'magenta');
        return element;
    })()
        .appendChild(
            (() => {
                const element = document.createElement('div');
                element.setAttribute('class', 'red');
                element.setAttribute('a', 1);
                element.setAttribute('b', 'ohlooong');
                element.textContent = 1;
                return element;
            })()
        ).parentNode
        .appendChild(
            (() => {
                const element = document.createElement('div');
                element.setAttribute('class', 'green');
                element.setAttribute('a', 1);
                element.setAttribute('b', 'ohlooong');
                return element;
            })()
            .appendChild(
                (() => {
                    const element = document.createElement('div');
                    element.setAttribute('class', 'magenta');
                    element.setAttribute('a', 1);
                    element.setAttribute('b', 'ohlooong');
                    element.textContent = 'Wow';
                    return element;
                })()
            ).parentNode
        ).parentNode
        .appendChild(
            (() => {
                const element = document.createElement('div');
                element.setAttribute('class', 'blue');
                element.setAttribute('a', 1);
                element.setAttribute('b', 'ohlooong');
                element.textContent = 3;
                return element;
            })()
        ).parentNode
).remove();

func2

const container = document.getElementById('main');

container.appendChild(
    setAttribute('class', 'magenta',
        document.createElement('main')
    )
        .appendChild(
            setAttribute('class', 'red',
                setAttribute('a', 1,
                    setAttribute('b', 'ohlooong',
                        Text(1,
                            document.createElement('div')
                        )
                    )
                )
            )
        ).parentNode
        .appendChild(
            setAttribute('class', 'green',
                setAttribute('a', 1,
                    setAttribute('b', 'ohlooong',
                        document.createElement('div')
                    )
                )
            )
            .appendChild(
                setAttribute('class', 'magenta',
                    setAttribute('a', 1,
                        setAttribute('b', 'ohlooong',
                            Text('Wow',
                                document.createElement('div')
                            )
                        )
                    )
                )
            ).parentNode
        ).parentNode
        .appendChild(
            setAttribute('class', 'blue',
                setAttribute('a', 1,
                    setAttribute('b', 'ohlooong',
                        Text(3,
                            document.createElement('div')
                        )
                    )
                )
            )
        ).parentNode
).remove();

nofunc

const container = document.getElementById('main');

const element1 = document.createElement('main');
const element2 = document.createElement('div');
const element3 = document.createElement('div');
const element4 = document.createElement('div');
const element5 = document.createElement('div');

element1.setAttribute('class', 'magenta');

element2.setAttribute('class', 'red');
element2.setAttribute('a', 1);
element2.setAttribute('b', 'ohlooong');
element2.textContent = 1;

element3.setAttribute('class', 'green');
element3.setAttribute('a', 1);
element3.setAttribute('b', 'ohlooong');

element4.setAttribute('class', 'magenta');
element4.setAttribute('a', 1);
element4.setAttribute('b', 'ohlooong');
element4.textContent = 'Wow';

element5.setAttribute('class', 'blue');
element5.setAttribute('a', 1);
element5.setAttribute('b', 'ohlooong');
element5.textContent = 3;

container
    .appendChild(element1
        .appendChild(element2)
        .parentNode
        .appendChild(element3
            .appendChild(element4)
            .parentNode
        ).parentNode
        .appendChild(element5)
        .parentNode
    ).remove();

nofunc2

const container = document.getElementById('main');

const elements = {
    element1: document.createElement('main'),
    element2: document.createElement('div'),
    element3: document.createElement('div'),
    element4: document.createElement('div'),
    element5: document.createElement('div')
}
elements.element1.setAttribute('class', 'magenta');

elements.element2.setAttribute('class', 'red');
elements.element2.setAttribute('a', 1);
elements.element2.setAttribute('b', 'ohlooong');
elements.element2.textContent = 1;

elements.element3.setAttribute('class', 'green');
elements.element3.setAttribute('a', 1);
elements.element3.setAttribute('b', 'ohlooong');

elements.element4.setAttribute('class', 'magenta');
elements.element4.setAttribute('a', 1);
elements.element4.setAttribute('b', 'ohlooong');
elements.element4.textContent = 'Wow';

elements.element5.setAttribute('class', 'blue');
elements.element5.setAttribute('a', 1);
elements.element5.setAttribute('b', 'ohlooong');
elements.element5.textContent = 3;

container
    .appendChild(elements.element1
        .appendChild(elements.element2)
        .parentNode
        .appendChild(elements.element3
            .appendChild(elements.element4)
            .parentNode
        ).parentNode
        .appendChild(elements.element5)
        .parentNode
    ).remove();

Ultra

const container = document.getElementById('main');

const elements = {
    element1: document.createElement('main'),
    element2: document.createElement('div'),
    element3: document.createElement('div'),
    element4: document.createElement('div'),
    element5: document.createElement('div')
}
elements.element1.setAttribute('class', 'magenta');

elements.element2.setAttribute('class', 'red');
elements.element2.setAttribute('a', 1);
elements.element2.setAttribute('b', 'ohlooong');
elements.element2.textContent = 1;

elements.element3.setAttribute('class', 'green');
elements.element3.setAttribute('a', 1);
elements.element3.setAttribute('b', 'ohlooong');

elements.element4.setAttribute('class', 'magenta');
elements.element4.setAttribute('a', 1);
elements.element4.setAttribute('b', 'ohlooong');
elements.element4.textContent = 'Wow';

elements.element5.setAttribute('class', 'blue');
elements.element5.setAttribute('a', 1);
elements.element5.setAttribute('b', 'ohlooong');
elements.element5.textContent = 3;


const component = container.appendChild(elements.element1);
elements.element1.appendChild(elements.element2);
elements.element1.appendChild(elements.element3)
    .appendChild(elements.element4);
elements.element1.appendChild(elements.element5);
component.remove();

Ultra2

const container = document.getElementById('main');

const elements = [
    document.createElement('main'),
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div'),
    document.createElement('div')
]
elements[0].setAttribute('class', 'magenta');

elements[1].setAttribute('class', 'red');
elements[1].setAttribute('a', 1);
elements[1].setAttribute('b', 'ohlooong');
elements[1].textContent = 1;

elements[2].setAttribute('class', 'green');
elements[2].setAttribute('a', 1);
elements[2].setAttribute('b', 'ohlooong');

elements[3].setAttribute('class', 'magenta');
elements[3].setAttribute('a', 1);
elements[3].setAttribute('b', 'ohlooong');
elements[3].textContent = 'Wow';

elements[4].setAttribute('class', 'blue');
elements[4].setAttribute('a', 1);
elements[4].setAttribute('b', 'ohlooong');
elements[4].textContent = 3;


const x = container.appendChild(elements[0])
x.appendChild(elements[1]);
const y = x.appendChild(elements[2]);
y.appendChild(elements[3]);
x.appendChild(elements[4]);

x.remove()