JSFiddle - React, Tailwind, and code Playground

JavaScript

(function () {
    var b = $("body");
    b.html("");

    console.time("test jQuery add / remove");


    for (var i = 0; i < 10000; i++) {
        var div = $("<div></div>").attr("id", "test" + i).html("Detta är div #" + i);
        b.append(div);
        if (i > 10) {
            $("#test" + i).remove();
        }
    }
    console.timeEnd("test jQuery add / remove");

    b.html("");

    console.time("test jQuery add / remove with cache");
    cache = [];
    for (var i = 0; i < 10000; i++) {
        var div = $("<div></div>").html("Detta är div #" + i);
        b.append(div);
        cache.push(div);
        if (i > 10) {
            var r = cache[0];
            r.remove();
            cache.splice(0, 1);
        }
    }
    console.timeEnd("test jQuery add / remove with cache");

    console.time("test add / remove with reusing");
    var cache = [];
    var reuse = [];
    for (var i = 0; i < 10000; i++) {
        var div;
        if (reuse.length > 0) {
            div = reuse.pop();
        } else {
            var div = $("<div></div>");
        }
        div.html("Detta är div #" + i);
        b.append(div);
        cache.push(div);
        if (i > 10) {
            var r = cache[0];
            r.remove();
            cache.splice(0, 1);
            reuse.push(r);
        }
    }
    console.timeEnd("test add / remove with reusing");


    console.time("test add / remove with reusing and native");
    var cache = [];
    var reuse = [];
    for (var i = 0; i < 10000; i++) {
        var div;
        if (reuse.length > 0) {
            div = reuse.pop();
        } else {
            var div = document.createElement("div");
        }
        div.innerHTML = "Detta är div #" + i;
        document.body.appendChild(div);
        cache.push(div);
        if (i > 10) {
            var r = cache[0];
            document.body.removeChild(r);            
            cache.splice(0, 1);
            reuse.push(r);
        }
    }
    console.timeEnd("test add /...