Can this be created in javascript. A timer?

JavaScript
205

You would place the console.time command in a separate script right at the top of the page.

206 
<script>
console.time("Page load");
console.timeEnd("Page load");
</script>
207 

<script>
console.time("Page load");
console.timeEnd("Page load");
</script>

<a href="https://www.google.com/"></a>
<div id="report">Measuring...</div>

<script>

  function determineImageTiming(url) {
    var reportDiv = document.getElementById('report');
    if (window.performance.getEntriesByName) {
      var timer = window.performance.getEntriesByName(url);
      var imageLoadTime = timer[0]['responseEnd'].toFixed(0);      
      reportDiv.innerHTML = 'Image Loaded at: ' + imageLoadTime + 'ms';
    }
    else {
      reportDiv.innerHTML = "window.performance.getEntriesByName not available";
    }
  }

  window.onload = function() {
    determineImageTiming('https://www.google.com/'); 
  }

</script>
208

That is likely to measure 0 time.

Move the console.timeEnd part in to the load event, so that when the page has finished loading it will end the timer.

209 
<script>
console.time("Page load");
</script>

<a href="https://www.google.com/"></a>
<div id="report">Measuring...</div>

<script>

  function determineImageTiming(url) {
    var reportDiv = document.getElementById('report');
    if (window.performance.getEntriesByName) {
      var timer = window.performance.getEntriesByName(url);
      var imageLoadTime = timer[0]['responseEnd'].toFixed(0);      
      reportDiv.innerHTML = 'Image Loaded at: ' + imageLoadTime + 'ms';
    }
    else {
      reportDiv.innerHTML = "window.performance.getEntriesByName not available";
    }
  }

  window.onload = function() {
    determineImageTiming('https://www.google.com/'); 
   console.timeEnd("Page load");
  }

</script>
210

That’s right. The console will now show the page load time.

211

now what?

212

Look at the console after the page has loaded. You will see the page load time shown there.

213

no I won’t cause nothing shows in there.

214

Let us figure out where the problem is then. A link to the code will be helpful for that.

215
216

The script wasn’t able to be executed because of an error somewhere else in your code.

The console says that the error occurs at the responseEnd part of the code.

217

Deleting all of that other scripting code, and it now works, showing a really small loading time. https://jsfiddle.net/xxys6aq3/1/

218

Can I show it in seconds, instead of milliseconds?

219

It only shows milliseconds because seconds are too long for computers.

220

How come this shows seconds?

221

Because that’s using a more complicated technique than console.time

222

What kind of technique is that using, and can I incorporate that technique?

223

They are using the built-in Date object to get the time, and yes, you can copy their technique.

224

What does built in date object mean?