JSFiddle - React, Tailwind, and code Playground

by thinkloop

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<!-- PROGRESSIVE 5000 ITEMS JQUERY -->
<h3 id="milli-jquery">Loading...</h3>
<div id="main-jquery" class="main"></div>

CSS

.main {
    width: 100%;
    font-size: 3px;
}

JavaScript

var numItems = 5000,
    batchSize = 100,
    items = [],
    startMoment,
    milliseconds;

// setup items
for (var i = 0; i < numItems; i++) {
    items.push(i);
}

// start moment
startMoment = moment();

// render batch with jquery
var i = 0,
    iteration = 0;
function renderBatch() {
    iteration++;
    for (i; i < items.length && i < iteration * batchSize; i++) {
        $('#main-jquery').append('<span>' + i + ' </span>');
    }
    
    // if there are more items, run another batch
    if (i < items.length) {
        console.log(i);
        requestAnimationFrame(renderBatch);
    }
    
    // otherwise stop and show milliseconds
    else {
        milliseconds = moment().diff(startMoment, 'milliseconds');
        $('#milli-jquery').text(milliseconds + ' milliseconds, ' + numItems + ' items, JQuery');        
    }
}
renderBatch();