I want to calculate the page load time; This means from second 0 (a little jquery snippet was loaded) to second x, when the whole page is loaded.
i wonder if any one had an experience with it, also ideas how to implement it correctly will be apperciated.
please i don't need an extension, i already have firebug, i need a js solution
thanks :)
As others have mentioned, this is not going to be terribly accurate. But this should work reasonably.
In your <head>, i.e., as early as possible:
<script>
var startTime = (new Date()).getTime();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(window).load(function () {
var endTime = (new Date()).getTime();
var millisecondsLoading = endTime - startTime;
// Put millisecondsLoading in a hidden form field
// or Ajax it back to the server or whatever.
});
</script>
The key is this behavior, from the jQuery docs:
When bound to the window element, the event fires when the user agent finishes loading all content within a document, including window, frames, objects and images.
Since scripts execute as soon as they are parsed, I suggest that you put one script tag just inside the header, then the script to hook the page load event after you've loaded jQuery:
<html>
<head>
<script>
// Capture start time
</script>
...
<script src="jquery.js" />
<script>
$(window).load(function() {
// Capture end time
});
</script>
...
That way you should be able to catch as much of the page load time as possible.
Might you be better off using a browser plugin? Calculating with JavaScript will necessary underestimate page load time, since it won't include the time to load the jQuery snippet, and won't include the time between the browser sending the request and the webserver responding?
There's a Load Time Analyzer plugin for Firefox.
If you are doing this for the purpose of optimization, then I suggest you using Yslow. It is a Firebug-Firefox extension. It can show you page load time and a lot of other useful info.
Read the W3C recommendation for Navigation Timing
Notable:
For example, the following script shows a naive attempt to measure the time it takes to fully load a page:
<html>
<head>
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
The script calculates the time it takes to load the page after the first bit of JavaScript in the head is executed, but it does not give any information about the time it takes to get the page from the server.
To address the need for complete information on user experience, this document introduces the PerformanceTiming interfaces. This interface allows JavaScript mechanisms to provide complete client-side latency measurements within applications. With the proposed interface, the previous example can be modified to measure a user's perceived page load time.
The following script calculates how much time to load a page since the most recent navigation.
<html>
<head>
<script type="text/javascript">
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
}
</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
You can't really do this with jQuery since $(document).ready(); fires when the page has loaded.
You can do this with the YSlow Firebug plug-in for Firfox. If you want this to work on all browsers you will need to add serverside code to show how long it took when the first element is written to the bottom element.
If that isn't what you would like you can use a tool like Selenium and write a test to capture the time from open to end of waitForPageToLoad. Selenium works on all browsers
来源：https://stackoverflow.com/questions/1211414/page-load-time-with-jquery