Calculating Page Load Time In JavaScript
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.
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>
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