Calculating Page Load Time In JavaScript
up vote
51
down vote
favorite
48
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
add a comment |
up vote
51
down vote
favorite
48
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
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
48
up vote
51
down vote
favorite
48
48
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
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
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
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
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
2
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
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
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
@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
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
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.nowreturns 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
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
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
navigationStartbegins 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 |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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.nowreturns 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
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.nowreturns 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
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
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
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
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
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.nowreturns 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.nowreturns 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
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
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
Yes,
Date.now returns a timestamp in milliseconds.– Bergi
Jan 15 '13 at 23:50
4
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
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
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
@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
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
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
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
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
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
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
3
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
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
1
for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17
for me it works fine. Can you provide some more details (Browser,Version etc.).
– HaNdTriX
Feb 10 '14 at 9:17
1
1
Browser: Chrome & Version: 32.0.1700.102
– Karthik Surianarayanan
Feb 10 '14 at 9:18
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
Are you sure your DOM has finished loading when you did the calculation?
– HaNdTriX
Feb 10 '14 at 9:20
1
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
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
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
navigationStartbegins 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
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
navigationStartbegins 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
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
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
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
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
navigationStartbegins 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
navigationStartbegins 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
1
1
Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25
Would this be in milliseconds?
– NiCk Newman
Feb 29 '16 at 1:25
3
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
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
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
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
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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