// run browser

/** Virtual DOM */
function testVDOM ()
{
    console.time('VDOM');

    const tag_body_virtual = document.createElement('body');

    for (let i = 0; i <= 1_000_000; i++)
    {
        tag_body_virtual.appendChild(
            document.createElement('div')
        );
    }

    console.timeEnd('VDOM');

    // console.time('VDOM_PASTE');
    // document.body.append(...tag_body_virtual.children);
    // console.timeEnd('VDOM_PASTE');

    document.body.innerHTML = '';
}

/** display: none */
function testDNONE ()
{
    console.time('DisplayNone');

    document.body.style.display = 'none';

    for (let i = 0; i <= 1_000_000; i++)
    {
        document.body.appendChild(
            document.createElement('div')
        );
    }

    console.timeEnd('DisplayNone');

    console.time('DisplayNoneCalc');
    document.body.style.display = 'block';
    console.timeEnd('DisplayNoneCalc');

    document.body.innerHTML = '';
}

/** DOM */
function testDOM ()
{
    console.time('DOM');

    for (let i = 0; i <= 1_000_000; i++)
    {
        document.body.appendChild(
            document.createElement('div')
        );
    }

    console.timeEnd('DOM');

    document.body.innerHTML = '';
}

setTimeout(() => testVDOM(),  1_000);
setTimeout(() => testDNONE(), 1_000 + 6_000);
setTimeout(() => testDOM(),   1_000 + 6_000 + 12_000);

void 0;