JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<!-- PROGRESSIVE 5000 ITEMS KO -->
<h3 id="milli-jquery" data-bind="text: millisecondsDisplay()">Loading...</h3>
<div id="main-jquery" class="main" data-bind="foreach: items">
    <span data-bind="html: $data"></span>
</div>

CSS

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

JavaScript

var numItems = 5000,
    batchSize = 5000,
    baseItems = [],
    startMoment,
    milliseconds;

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

// start moment
startMoment = moment();

// setup ko
var vm = {
    items: ko.observableArray([]),
    millisecondsDisplay: ko.observable()
};
ko.applyBindings(vm);

var iteration = 0;
function renderBatch() {
    batchStartIndex = iteration * batchSize;
    vm.items.push.apply(vm.items, baseItems.slice(batchStartIndex, batchStartIndex + batchSize));
    iteration++;

    // if there are more items, run another batch
    if (batchStartIndex < baseItems.length) {
        requestAnimationFrame(renderBatch);
    }
    
    // otherwise stop and show milliseconds
    else {
        milliseconds = moment().diff(startMoment, 'milliseconds');
        vm.millisecondsDisplay(milliseconds + ' milliseconds, ' + numItems + ' items, KO');      
    }
}
renderBatch();