JSFiddle - React, Tailwind, and code Playground

by pindexis

HTML

<body>
    <section id="container"></section>
    <label>Slow:</label>: <span id="slow"></span> 
    <br />
    <label>Fast:</label>: <span id="fast"></span> 
</body>

CSS

.div {
    float:left;
}

JavaScript

var n = 100;
var contents;

function reset() {
    container.innerHTML = '';
    contents = [];
    for (var i = 0; i < n; i++) {
        var div = document.createElement('div');
        div.innerText = "div " + i;
        container.appendChild(div);
    }
}

function clearContents(fast) {
    reset();
    els = document.getElementsByTagName("div");
    start = performance.now();
    if (fast) clearFast(els);
    else clearSlow(els);
    return (performance.now() - start)
}


function clearSlow(divs) {
    Array.prototype.forEach.call(divs, function (div) {
        contents.push(div.innerText);
        div.innerText = "";
    });
}

function clearFast(divs) {
    Array.prototype.forEach.call(divs, function (div) {
        contents.push(div.innerText);
    });
    Array.prototype.forEach.call(divs, function (div) {
        div.innerText = "";
    });
}

document.getElementById("slow").innerHTML = clearContents(false);
document.getElementById("fast").innerHTML = clearContents(true);