Calculating Page Load Time In JavaScript

up vote
51
down vote

favorite

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?

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

2

If this is just for debugging purposes, you should use a better solution like Firebug or any other dev tools included in modern day browsers. They'll be far more accurate.
– jeremyharris
Jan 15 '13 at 15:39

and, where is inctimer initialized ?
– palerdot
Jan 15 '13 at 15:39

@Bergi you're right, I was misinformed about (or minunderstood) the differences. Comment deleted!
– jeremyharris
Jan 15 '13 at 15:54

Sometimes I try Firebug but it is just like "Inspect Element" on Chrome, as far as I can see
– zingzing45
Jan 15 '13 at 23:14

Why did someone downvote my question?
– zingzing45
Mar 29 '13 at 18:03

add a comment |

up vote
51
down vote

favorite

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?

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

2

If this is just for debugging purposes, you should use a better solution like Firebug or any other dev tools included in modern day browsers. They'll be far more accurate.
– jeremyharris
Jan 15 '13 at 15:39

and, where is inctimer initialized ?
– palerdot
Jan 15 '13 at 15:39

@Bergi you're right, I was misinformed about (or minunderstood) the differences. Comment deleted!
– jeremyharris
Jan 15 '13 at 15:54

Sometimes I try Firebug but it is just like "Inspect Element" on Chrome, as far as I can see
– zingzing45
Jan 15 '13 at 23:14

Why did someone downvote my question?
– zingzing45
Mar 29 '13 at 18:03

add a comment |

up vote
51
down vote

favorite

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?

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

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?

javascript load setinterval

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

edited Oct 29 '13 at 9:37

HaNdTriX

18k65667

asked Jan 15 '13 at 15:36

zingzing45

3331714

asked Jan 15 '13 at 15:36

zingzing45

3331714

asked Jan 15 '13 at 15:36

zingzing45

3331714

2

If this is just for debugging purposes, you should use a better solution like Firebug or any other dev tools included in modern day browsers. They'll be far more accurate.
– jeremyharris
Jan 15 '13 at 15:39

and, where is inctimer initialized ?
– palerdot
Jan 15 '13 at 15:39

@Bergi you're right, I was misinformed about (or minunderstood) the differences. Comment deleted!
– jeremyharris
Jan 15 '13 at 15:54

Sometimes I try Firebug but it is just like "Inspect Element" on Chrome, as far as I can see
– zingzing45
Jan 15 '13 at 23:14

Why did someone downvote my question?
– zingzing45
Mar 29 '13 at 18:03

add a comment |

2

If this is just for debugging purposes, you should use a better solution like Firebug or any other dev tools included in modern day browsers. They'll be far more accurate.
– jeremyharris
Jan 15 '13 at 15:39

and, where is inctimer initialized ?
– palerdot
Jan 15 '13 at 15:39

@Bergi you're right, I was misinformed about (or minunderstood) the differences. Comment deleted!
– jeremyharris
Jan 15 '13 at 15:54

Sometimes I try Firebug but it is just like "Inspect Element" on Chrome, as far as I can see
– zingzing45
Jan 15 '13 at 23:14

Why did someone downvote my question?
– zingzing45
Mar 29 '13 at 18:03

If this is just for debugging purposes, you should use a better solution like Firebug or any other dev tools included in modern day browsers. They'll be far more accurate.
– jeremyharris
Jan 15 '13 at 15:39

and, where is inctimer initialized ?
– palerdot
Jan 15 '13 at 15:39

@Bergi you're right, I was misinformed about (or minunderstood) the differences. Comment deleted!
– jeremyharris
Jan 15 '13 at 15:54

Sometimes I try Firebug but it is just like "Inspect Element" on Chrome, as far as I can see
– zingzing45
Jan 15 '13 at 23:14

Why did someone downvote my question?
– zingzing45
Mar 29 '13 at 18:03

add a comment |

3 Answers
3

active

oldest

votes

up vote
59
down vote

accepted

Don't ever use the setInterval or setTimeout functions for time measuring! They are unreliable, and it is very likely that the JS execution scheduling during a documents parsing and displaying is delayed.

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
 <head>
 <script type="text/javascript">
 var timerStart = Date.now();
 </script>
 <!-- do all the stuff you need to do -->
 </head>
 <body>
 <!-- put everything you need in here -->

 <script type="text/javascript">
 $(document).ready(function() 
 console.log("Time until DOMready: ", Date.now()-timerStart);
 );
 $(window).load(function() 
 console.log("Time until everything loaded: ", Date.now()-timerStart);
 );
 </script>
 </body>
</html>

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

4

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

1

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

add a comment |

up vote
168
down vote

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

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

3

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

1

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

1

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

1

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

|
show 11 more comments

up vote
24
down vote

The answer mentioned by @HaNdTriX is a great, but we are not sure if DOM is completely loaded in the below code:

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

This works perfectly when used with onload as:

window.onload = function () 
 var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
 console.log('Page load time is '+ loadTime);

Edit 1: Added some context to answer

Note: loadTime is in milliseconds, you can divide by 1000 to get seconds as mentioned by @nycynik

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

1

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

3

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

2

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f14341156%2fcalculating-page-load-time-in-javascript%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
59
down vote

accepted

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
 <head>
 <script type="text/javascript">
 var timerStart = Date.now();
 </script>
 <!-- do all the stuff you need to do -->
 </head>
 <body>
 <!-- put everything you need in here -->

 <script type="text/javascript">
 $(document).ready(function() 
 console.log("Time until DOMready: ", Date.now()-timerStart);
 );
 $(window).load(function() 
 console.log("Time until everything loaded: ", Date.now()-timerStart);
 );
 </script>
 </body>
</html>

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

4

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

1

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

add a comment |

up vote
59
down vote

accepted

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
 <head>
 <script type="text/javascript">
 var timerStart = Date.now();
 </script>
 <!-- do all the stuff you need to do -->
 </head>
 <body>
 <!-- put everything you need in here -->

 <script type="text/javascript">
 $(document).ready(function() 
 console.log("Time until DOMready: ", Date.now()-timerStart);
 );
 $(window).load(function() 
 console.log("Time until everything loaded: ", Date.now()-timerStart);
 );
 </script>
 </body>
</html>

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

4

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

1

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

add a comment |

up vote
59
down vote

accepted

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
 <head>
 <script type="text/javascript">
 var timerStart = Date.now();
 </script>
 <!-- do all the stuff you need to do -->
 </head>
 <body>
 <!-- put everything you need in here -->

 <script type="text/javascript">
 $(document).ready(function() 
 console.log("Time until DOMready: ", Date.now()-timerStart);
 );
 $(window).load(function() 
 console.log("Time until everything loaded: ", Date.now()-timerStart);
 );
 </script>
 </body>
</html>

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

Instead, use the Date object to create a timestamp when you page began loading, and calculate the difference to the time when the page has been fully loaded:

<doctype html>
<html>
 <head>
 <script type="text/javascript">
 var timerStart = Date.now();
 </script>
 <!-- do all the stuff you need to do -->
 </head>
 <body>
 <!-- put everything you need in here -->

 <script type="text/javascript">
 $(document).ready(function() 
 console.log("Time until DOMready: ", Date.now()-timerStart);
 );
 $(window).load(function() 
 console.log("Time until everything loaded: ", Date.now()-timerStart);
 );
 </script>
 </body>
</html>

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

edited Apr 26 at 0:55

Trevor Clarke

1,3391819

answered Jan 15 '13 at 17:16

Bergi

357k55530846

answered Jan 15 '13 at 17:16

Bergi

357k55530846

answered Jan 15 '13 at 17:16

Bergi

357k55530846

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

4

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

1

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

add a comment |

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

4

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

1

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

Ok, so I transformed this a bit so that it would alert the numbers instead. So now, I have some strange numbers like 15 and 1399 the first time, or something else like that. Is the second number in miliseconds? (1/1000 of a second)In that case, what is the first number (time until dom is ready)? From what I see, it is predicting the future by telling when something will be loaded before it happens....
– zingzing45
Jan 15 '13 at 23:46

Wait, I figured the second question out. Now, I only need my confirmation of "is the time until everything loaded in miliseconds" question
– zingzing45
Jan 15 '13 at 23:48

Yes, Date.now returns a timestamp in milliseconds.
– Bergi
Jan 15 '13 at 23:50

Why is this answer so popular? The code uses jQuery, will not be available until far too late in the loading process surely?
– Alexander Wigmore
Dec 27 '14 at 17:35

@AlexanderWigmore: I have no idea why it's popular either, I guess it's just from the 11k views on the question. That it uses jQuery is absolutely no problem, as it'll need to measure the time to load the script file anyway. And of course you could do without jQuery and attach the listeners for DOMready and window.onload manually.
– Bergi
Dec 27 '14 at 21:13

add a comment |

up vote
168
down vote

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

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

3

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

1

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

1

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

1

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

|
show 11 more comments

up vote
168
down vote

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

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

3

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

1

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

1

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

1

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

|
show 11 more comments

up vote
168
down vote

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

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

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

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

edited Feb 10 '14 at 11:38

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

answered Feb 14 '13 at 15:40

HaNdTriX

18k65667

3

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

1

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

1

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

1

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

|
show 11 more comments

3

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

1

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

1

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

1

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

var loadTime = window.performance.timing.domComplete- window.performance.timing.navigationStart; why this is not working? This should give the load time where as what you mentioned gives the DOMContentLoaded time. I tried with this and it gives -(navigationStart) for me
– Karthik Surianarayanan
Feb 10 '14 at 3:34

for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17

Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18

Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20

That both are the same makes sense since domContentLoadedEventEnd and domComplete are the same. Try: document.addEventListener("DOMContentLoaded", function(event) // Do your calculation here ); (Maybe your jQuery is messed up somehow)
– HaNdTriX
Feb 10 '14 at 11:00

|
show 11 more comments

up vote
24
down vote

The answer mentioned by @HaNdTriX is a great, but we are not sure if DOM is completely loaded in the below code:

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

This works perfectly when used with onload as:

window.onload = function () 
 var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
 console.log('Page load time is '+ loadTime);

Edit 1: Added some context to answer

Note: loadTime is in milliseconds, you can divide by 1000 to get seconds as mentioned by @nycynik

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

1

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

3

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

2

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

add a comment |

up vote
24
down vote

The answer mentioned by @HaNdTriX is a great, but we are not sure if DOM is completely loaded in the below code:

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

This works perfectly when used with onload as:

window.onload = function () 
 var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
 console.log('Page load time is '+ loadTime);

Edit 1: Added some context to answer

Note: loadTime is in milliseconds, you can divide by 1000 to get seconds as mentioned by @nycynik

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

1

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

3

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

2

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

add a comment |

up vote
24
down vote

The answer mentioned by @HaNdTriX is a great, but we are not sure if DOM is completely loaded in the below code:

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

This works perfectly when used with onload as:

window.onload = function () 
 var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
 console.log('Page load time is '+ loadTime);

Edit 1: Added some context to answer

Note: loadTime is in milliseconds, you can divide by 1000 to get seconds as mentioned by @nycynik

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

The answer mentioned by @HaNdTriX is a great, but we are not sure if DOM is completely loaded in the below code:

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

This works perfectly when used with onload as:

window.onload = function () 
 var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
 console.log('Page load time is '+ loadTime);

Edit 1: Added some context to answer

Note: loadTime is in milliseconds, you can divide by 1000 to get seconds as mentioned by @nycynik

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

edited Dec 29 '17 at 8:21

answered Jan 5 '15 at 12:27

Samdeesh

433516

answered Jan 5 '15 at 12:27

Samdeesh

433516

answered Jan 5 '15 at 12:27

Samdeesh

433516

1

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

3

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

2

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

add a comment |

1

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

3

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

2

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25

Yep, Returns the time, in milliseconds. You can divide by 1000 to get seconds. ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
– nycynik
Aug 30 '16 at 14:45

navigationStart begins when you start loading the page in the browser. this has the advantage that it includes all server side processing time (for the main HTML page) and any network latency - which is impossible to calculate with a simple javascript timer started at the beginning of the page
– Simon_Weaver
Feb 17 '17 at 10:27

True enough, but if you're in an extreme legacy browser environment (it wasn't my idea) then anything in PerformanceTiming is out of reach. Using timings initiated with a <script> tag in the head node will at least, over time, give you a sense of which pages take longer to load.
– user1329482
Mar 9 at 12:14

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth