JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<div id="container">
</div>

JavaScript

window.onclick = function(e){
    var targ = e.target || e.srcElement;
    if (targ.className == 'futureLink'){
        alert(targ.innerText);
    }
    e.preventDefault();
};

var container = document.getElementById('container');

function docFragAppendTest() {
    var startEpoch = time.getEpoch();
    var docFrag = document.createDocumentFragment();
    for (var i = 0; i < 15000; i++) {
        var link = document.createElement('a');
        var br = document.createElement('br');
        link.className = 'futureLink';
        link.innerText = 'Test Link ' + (i + 1);
        link.href = '#';
        docFrag.appendChild(link);
        docFrag.appendChild(br);
    }
    container.appendChild(docFrag);
    var endEpoch = time.getEpoch();
    console.log(time.getTimeElapsed(startEpoch, endEpoch));
}

function divAppendTest() {
    var startEpoch = time.getEpoch();
    for (var i = 0; i < 15000; i++) {
        var link = document.createElement('a');
        var br = document.createElement('br');
        link.className = 'futureLink';
        link.innerText = 'Test Link ' + (i + 1);
        link.href = '#';
        container.appendChild(link);
        container.appendChild(br);
    }
    var endEpoch = time.getEpoch();
    console.log(time.getTimeElapsed(startEpoch, endEpoch));    
}

var time = {
    getEpoch: function() {
        return new Date().getTime();
    },
    getTimeElapsed: function(startEpoch, endEpoch) {
        return endEpoch - startEpoch;
    }
};

//docFragAppendTest();
divAppendTest();