Bond wrote:
how do I know when the browser is making a request to the server? I am
not having an onclick event for EVERY hyperlink, submit, etc. There
must be some javascript function that I can overwrite that will allow
me to do something when the browser requests something from the server.
My plan is whenever a browser is about to request something from the
server to create a time stamp and then compare this time to the time
when the page returns from the server. This will allow me to measure
performance.
Thanks in advance to all that help!
I presume that you are only using this as a bit of a hack to see how
long pages take to load for test and evaluation purposes and don't
expect the results to be particularly reliable.
The simple (i.e. quick, easy but unreliable) way is to place a button on
the page that, when clicked, updates a cookie with the current timestamp
then reloads a page. An onload function compares the cookie's timestamp
to the current time, displays the difference and clears the cookie.
Clearing the cookie ensures that the time difference is only displayed
if the custom reload button was clicked.
It's not particularly reliable, but it's probably OK for testing.
Caching will likely affect results and network and server latency will
all be bundled in.
A more complex but possibly more useful way is to attach the cookie
setting function to the body onclick event and a check function on the
onunload event. If the onunload is fired less than say 0.5 seconds
after the last click, it is likely that the unload was caused by a click
on a navigation link on your page. Any longer and the user may have
used some other navigation (say bookmark or forward/back buttons) to
cause the unload so clear the cookie. The next time the page loads, no
stats will be recorded.
If you have links on your pages that go to other sites, use the event to
find the link that was clicked on, and if the href is not on your site,
clear the cookie. This further reduces the possibility that you will
include external navigation in your stats, but is by no means perfect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page load time </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#msgBox {
border: 1px solid blue; position: absolute; left: 5ex; top:5ex;
color: blue; background-color: #eeeeff; width: 25em;
padding: 5px 5px 5px 10px; display: none;
}
#msg {
margin:0; padding:0
}
#close {
float: right; text-decoration: underline; font-weight: bold;
padding: 0 15px 0 0; margin-top: -2ex; cursor: pointer;
}
</style>
<script type="text/javascript">
function updateEventCookie(e){
var e = e || window.event;
var n = new Date();
var t = n.toGMTString();
n.setDate( n.getDate()+1 );
document.cookie = 'eStamp=' + t + '&&' + ((e)?e.type:'unknown')
+ '; expires=' + n.toGMTString() + '; path=/';
}
// Gets the timestamp from the cookie and compares it
// to the current time
function timeSinceLastEvent() {
var now = new Date();
if ( ! document.cookie
|| ! document.cookie.match('&&')
) return;
var c = document.cookie; //.split(';');
var oT = new Date( c.split('=')[1].split('&&')[0] );
var oE = c.split('&&')[1];
msg.innerHTML =
'<b>' + oE + '</b> event at: ' + oT + '<br>'
+ 'This page loaded: ' + now + '<br>'
+ '<b>Δ : ' + padZ( (now - oT)/1000, 3 )
+ '</b> seconds'
;
msgBox.style.display='block';
}
function padZ( x, n ){
x += '';
var y = x.split('.');
y[1] = ( y[1] )? '.' + y[1] : '.0';
var i = y[1].length
while ( i++ <= n ) y[1] += '0';
return y[0]+y[1];
}
function clearCookie(e){
var exp = new Date();
exp.setDate( exp.getDate()-1 );
document.cookie = 'eStamp=; ' + 'expires=' + exp + '; ' + 'path=/';
}
</script>
</head>
<body onload="
timeSinceLastEvent();
clearCookie(event);
">
<input type="button" value="Timed reload" onclick="
updateEventCookie(event);
window.location.reload( false );
">
<div id="msgBox"><p id="msg"></p><span id="close" onclick="
document.getElementById('msgBox').style.display='n one';
">◊ Close</span>
</div>
<script type="text/javascript">
// For messages - I hate alerts
var msg = document.getElementById('msg');
var msgBox = document.getElementById('msgBox');
</script>
</body>
</html>
--
Rob