JSFiddle - React, Tailwind, and code Playground

by thetenfold

HTML

<p class="italic">(the longer it runs, the more accurate it is)</p>

<p class="italic">(it is recommended you don't run anything else while doing this test; the results may be off)</p>

<p id="time_holder">Average Minimum Interval Time: <span id="time">0.00</span> ms</p>

CSS

.italic {
    font-style: italic;
}

#time_holder, #time_holder * {
    font-size: 13pt;
    font-family: consolas, courier;
    display: inline;
}

#time {
    font-weight: bold;
}

JavaScript

// keep all the variables away from the global object
// and also allow the page to load a little before it starts
// (makes for slightly more accurate measurement)
window.setTimeout(function () {
    var count = 0;
    var start = new Date().getTime();
    var field = document.getElementById('time');

    function displayInfo() {
        field.textContent = ( (new Date().getTime()  - start) / count).toFixed(2);
    }

    // update the count
    // ------------------
    // we want the shortest function possible here because
    // it's going to be running at top speed
    window.setInterval(function () {
        count += 1;
    }, 0);

    // show the average time
    window.setInterval(displayInfo, 500);
}, 500);