Web Perf

by HYEONGJINKIM

HTML

<body onload="featureDetect()">
    <div id="intro"><h1>Showing some Web Perf API's</h1>
This is a simple example of an HTML page that loads an external stylesheet, a JavaScript and an image. Additionally the user may click on the "Load another image" button to fire a JavaScript function that will add a new image to the DOM.<br><br>

The embedded JavaScript will automatically check for support of the Resource Timing and Performance Timeline specs, if supported 2 buttons will activate. Clicking on either will show the data available to developers using those new API's.<br><br>

Clicking on "Load another image" will add a new image to the DOM, at that point it is possible to display timing data again. This demonstrates how the browser keeps measuring time and how in different moments in time the data available can grow. Developers might for example measure the timing of XHR requests.
</div>
    <div id="perf_support"><h2>Browser support</h2></div>
    <div id="buttons">
      <button id="myButton" name="Load" onclick="loadResources()">Load another image</button><br><br>
      <button id="myButton2" name="display" onclick="displayPerfData()" disabled="true">Display basic performance data</button>
    </div>
    <div id="perf_data"></div>
    <div id="buttons2">
      <button id="myButton3" name="display" onclick="displayDetailedPerfData()" disabled="true">Display detailed performance data</button>
    </div>
    <div id="detailed_perf_data"></div>
    <div id="text_blurb"><h2>Random text to use up space.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus justo, pretium quis volutpat at, volutpat et lorem. Pellentesque eget nulla velit. Fusce volutpat ante non leo sagittis in lobortis tortor scelerisque. Nunc in metus velit. Maecenas et eros id tellus elementum gravida id sed sapien. Etiam vehicula, nisi eu facilisis cursus, lacus nisi convallis quam, et imperdiet mauris ante nec felis. Class aptent taciti sociosqu ad litora torquent...

JavaScript

// verify if the browser supports the needed API's
function featureDetect() {
  var rt = "Oh rats! Your browser does not support the Resource Timing spec :(";
  var pt = "Oh rats! Your browser does not support the Performance Timeline spec :(";

  if (!!window.performance.getEntries) {
    pt = "Excellent! Your browser supports the Performance Timing spec";
    var e = window.performance.getEntries();
      for (var i in e) {
      rt = "Excellent! Your browser supports the Resource Timing spec";
      document.getElementById('myButton2').disabled=false;
      document.getElementById('myButton3').disabled=false;
    }
  }
  document.getElementById('perf_support').innerHTML = document.getElementById('perf_support').innerHTML + rt + "<br>" + pt + "<br>" + "<br>";
}

// load an additional image
function loadResources() {
  var image = new Image();
  image.id = 'image' + (document.getElementById('images').childNodes.length/2 - 1);
  image.src = 'http://logme.mobi/jsnt/slowimg.php/res/image2.jpg';
  if (0 && !!window.performance.getEntriesByType) {
    image.onload = resourceTiming();
  }
  document.getElementById('images').appendChild(image);
  document.getElementById('images').appendChild(document.createElement('br'));
  document.getElementById('myButton').disabled=true;
}

// display timing information about page resources
function resourceTiming() {
   var resourceList = window.performance.getEntriesByType("resource");
   for (i = 0; i < resourceList.length; i++) {
      if (resourceList[i].initiatorType == "img") {
//         alert("It took about "+ Math.round(resourceList[i].responseEnd - resourceList[i].startTime) + " ms to fetch " + resourceList[i].name);
         alert("It took about "+ Math.round(resourceList[i].duration) + " ms to fetch " + resourceList[i].name);
      }
   }
}

function displayPerfData() {
  if (!!window.performance.getEntries) {
    var perf_data = loadPerfTimeData();
    document.getElementById('perf_data').innerHTML = "" + perf_data +...