Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculating Page Load Time In JavaScript

I am trying to make a webpage that, when it starts loading, uses an Interval to start a timer.

When the page fully loads, it stops the timer,

but 99% of the time i get time measurements of 0.00 or 0.01 even if it takes longer.

Occasionally, it says something that makes more sense like .28 or 3.10 at some times.

Here is the code if it helps:

var hundredthstimer = 0; var secondplace = 0;  function addinc(){      hundredthstimer += 1;     if (inctimer == 100){         hundredthstimer = 0;         secondplace += 1;     }  }  var clockint = setInterval(addinc, 10);  function init(){     var bconv1 = document.getElementById("bconverter1");     var bconv2 = document.getElementById("bconverter2");      $(bconv2).hide();      clearInterval(clockint);      if (inctimer.len !== 2){         inctimer = "0" + inctimer;     }     alert(secondplace + "." + inctimer); } onload = init; 

So it basically creates a variable called hundredthstimer which is increased by '1' every 10 miliseconds(.01 seconds).

Then, if this number reaches 1000(1 full second), a variable called secondsplace goes up by 1, since that is how many full seconds it has run for.

Then, it alerts secondsplace, a decimal point, and hundredthsplace as the total load time.

But the problem above with incorrect numbers still exists. Why?

like image 880
austinstout Avatar asked Jan 15 '13 15:01

austinstout


People also ask

How do you measure page load time?

Measure Page Load Times Using Google Pagespeed Insights To use this tool, you'll want to first pick a webpage on your site you want to study. You then go to the PageSpeed Insights section and type in the URL of the webpage. The tool will then works its magic and determine how fast the webpage loads.

What is page loading time?

Page load time is the time it takes for a page to load, measured from navigation start to the start of the load event. let time = performance. timing; let pageloadtime = time.

Does javascript run on page load?

onload runs after page load and all javascript is available, so the codeAddress() function can be declared anywhere within the page or linked js files. It doesn't have to come before unless it were called during the page load itself. @Jared Yes it does.


1 Answers

Why so complicated? When you can do:

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 

If you need more times check out the window.performance object:

console.log(window.performance); 

Will show you the timing object:

connectEnd                 Time when server connection is finished. connectStart               Time just before server connection begins. domComplete                Time just before document readiness completes. domContentLoadedEventEnd   Time after DOMContentLoaded event completes. domContentLoadedEventStart Time just before DOMContentLoaded starts. domInteractive             Time just before readiness set to interactive. domLoading                 Time just before readiness set to loading. domainLookupEnd            Time after domain name lookup. domainLookupStart          Time just before domain name lookup. fetchStart                 Time when the resource starts being fetched. loadEventEnd               Time when the load event is complete. loadEventStart             Time just before the load event is fired. navigationStart            Time after the previous document begins unload. redirectCount              Number of redirects since the last non-redirect. redirectEnd                Time after last redirect response ends. redirectStart              Time of fetch that initiated a redirect. requestStart               Time just before a server request. responseEnd                Time after the end of a response or connection. responseStart              Time just before the start of a response. timing                     Reference to a performance timing object. navigation                 Reference to performance navigation object. performance                Reference to performance object for a window. type                       Type of the last non-redirect navigation event. unloadEventEnd             Time after the previous document is unloaded. unloadEventStart           Time just before the unload event is fired. 

Browser Support

More Info

like image 90
HaNdTriX Avatar answered Sep 23 '22 13:09

HaNdTriX