JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<form id="form1">
    <div>
      <table>
        <tr>
          <th>Event</th>

          <th>API</th>

          <th>TICKS</th>

          <th>TIME</th>
        </tr>

        <tr>
          <td>Navigation Start</td>

          <td>window.msPerformance.timing.navigationStart</td>

          <td id="ticksNavigationStart"></td>

          <td id="timeNavigationStart"></td>
        </tr>

        <tr>
          <td>Load End</td>

          <td>window.msPerformance.timing.loadEnd</td>

          <td id="ticksLoadEnd"></td>

          <td id="timeLoadEnd"></td>
        </tr>

        <tr>
          <td>Run Time</td>

          <td>window.msPerformance.timingMeasures.navigation</td>

          <td></td>

          <td id="timeNavigation"></td>
        </tr>

        <tr>
          <td>Run Time</td>

          <td>timing.loadEnd - timing.navigationStart</td>

          <td></td>

          <td id="timeRuntime"></td>
        </tr>
      </table><input type="button" id="showInfo" value=
      "Show Performance Data" />
    </div>
  </form>

JavaScript

var $ = function(id){
    return document.getElementById(id);
};

function InsertPerformanceData() {
    if (window.msPerformance != null) {
        var w = window,
            navStart = w.msPerformance.timing.navigationStart + "ms",
            navStartTime = Date(w.msPerformance.timing.navigationStart),
            loadEnd = w.msPerformance.timing.loadEventEnd + "ms",
            loadEndTime = Date(w.msPerformance.timing.loadEventEnd),
            navigation = w.msPerformance.timingMeasures.navigation + "ms",
            runtime = (w.msPerformance.timing.loadEventEnd - w.msPerformance.timing.navigationStart) + "ms";
        
        $("ticksNavigationStart").innerText = navStart;
        $("timeNavigationStart").innerText = navStartTime;
        $("ticksLoadEnd").innerText = loadEnd;
        $("timeLoadEnd").innerText = loadEndTime;
        $("timeNavigation").innerText = navigation;
        $("timeRuntime").innerText = runtime;
        
    }else{
        alert('Browser unterstĂĽtzt keine Messung');
    }
}


$('showInfo').onclick = InsertPerformanceData;