JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="timebox">
    Total Time: <span id="time"></span>ms
</div>
<table id="table"></table>

CSS

.timebox {
    padding: 5px;
    margin: 5px 0px;
    border: 1px solid #CCC;
}
table {
    border: 1px solid #AAA;
    width: 100%;
}
tr:nth-child(odd) {
    background: #FAFAFA;
}

JavaScript

var then = +new Date();
var total = 15000;
var i = 0;
var alphabet = 'abcdefghijklmnopqrstuvwxyz';

var frag = document.createDocumentFragment();
do {
    var row = document.createElement('tr');
    var cell1 = document.createElement('td');
    cell1.appendChild(document.createTextNode(i));
    var cell2 = document.createElement('td');
    cell2.appendChild(document.createTextNode(alphabet[i % 26]));
    row.appendChild(cell1);
    row.appendChild(cell2);
    frag.appendChild(row);
} while(++i < total)
document.getElementById('table').appendChild(frag);

var now = +new Date();
document.getElementById('time').appendChild(document.createTextNode(now - then));