JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<!-- SIMPLEST 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>
<span data-bind="html: $data"></span>
</div>
CSS
.main {
width: 100%;
font-size: 3px;
}
JavaScript
var numItems = 5000,
items = [],
startMoment,
milliseconds;
// setup items
for (var i = 0; i < numItems; i++) {
items.push(i);
}
// start moment
startMoment = moment();
// render ko
var vm = {
items: ko.observableArray(items),
millisecondsDisplay: ko.observable()
};
ko.applyBindings(vm);
// show milliseconds
milliseconds = moment().diff(startMoment, 'milliseconds');
vm.millisecondsDisplay(milliseconds + ' milliseconds, ' + numItems + ' items, KO');