<!DOCTYPE html>
<html>

<head>
  <title>Performance Navigation Timing Demo</title>
  <style>
    body {
      background-color: rgb(255, 255, 255);
      color: #0047ab;
      font-size: 50px;
    }
  </style>
</head>

<body>
  <script>
    function LogInfo(info, time) {
      var message = info + ": " + time;
      console.log(message);
      document.getElementById('info').innerHTML += message + ".\n";
    }

    function path(pathname) {
      var filename = pathname.substring(pathname.lastIndexOf('/') + 1);
      return pathname.substring(0, pathname.length - filename.length);
    }

    function loadImage() {
      var stored_entries = [];
      var img_location = document.location.origin + path(document.location.pathname)
          + "resources/square.png";
      var img1 = img_location;
      var img = document.createElement("img");
      img.src = img1;
      document.body.appendChild(img);
    }

    window.addEventListener("load", function() {
      // Load image for logging resource timing info.
      loadImage();

      // Log performance time now.
      let now = window.performance.now();
      LogInfo("Performance now", now);

      // Get navigation timing entry from performance entry buffer.
      let navigationTiming = performance.getEntriesByType("navigation")[0];

      // Log performance navigation timing info.
      LogInfo("Unload event start", navigationTiming.unloadEventStart);
      LogInfo("Unload event end", navigationTiming.unloadEventEnd);
      LogInfo("Dom content loaded event start", navigationTiming.domContentLoadedEventStart);
      LogInfo("Dom content loaded event end", navigationTiming.domContentLoadedEventEnd);
      LogInfo("Dom complete", navigationTiming.domComplete);
      LogInfo("Load event start", navigationTiming.loadEventStart);
      LogInfo("Load event end", navigationTiming.loadEventEnd);

      // Log performance resource timing info.
      LogInfo("Fetch start", navigationTiming.fetchStart);
      LogInfo("Connect start", navigationTiming.connectStart);
      LogInfo("Connect end", navigationTiming.connectEnd);
      LogInfo("Request start", navigationTiming.requestStart);
      LogInfo("Response start", navigationTiming.responseStart);

      // Check navigation type.
      let navigationType = "Navigation type: ";
      if (navigationTiming.type == PerformanceNavigation.TYPE_NAVIGATE) {
        console.log(navigationType + "Navigation");
      } else if (navigationTiming.type == PerformanceNavigation.TYPE_RELOAD) {
        console.log(navigationType + "Reload");
      }

    });

  </script>
  <div>
    <span id='info' style='white-space: pre; background-color:#00FF00'></span>
  </div>
</body>

</html>