Browser Requests

[Bond]

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!

 

[Grant Wagner]

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.
No.

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.

Even if you could identify when the browser is making a request to the
server in a generic way and create a timestamp of that instant, the
script holding that timestamp would disappear as soon as a new page
loaded, so there would be no way to compare the current time to the
previously stored timestamp since it would no longer exist.

A better alternative might be to attempt to load an image of a known
size and time it takes to download that. Of course, all you'd be
measuring is the time it takes to download that image at that moment in
time, which may or may not represent the actual bandwidth the end-user
has available.

<script type="text/javascript">
var t = (new Date()).getTime();
var fileSize = 1234567;
var i = new Image();
i.onload = determineConnectionSpeed;
i.src = 'path\to\file.jpg?' + (Math.random() * 9e9);
function determineConnectionSpeed() {
alert(
Math.floor((fileSize * 8) / ((new Date()).getTime() - t) * 1000)
+
'bps'
)
}
</script>

Of course, there is the question of how accurate this will be. A bigger
file will probably make the test more accurate, but ask yourself whether
your users will appreciate being forced to download a 1MB+ image just so
you can determine their connection speed.

 

[Christopher J. Hahn]

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'm not aware of any such function but, with some struggle, you might
be able to finagle something very unreliable that does something
remotely similar.

But I'd venture to say that the statistics you'd end up with are
probably not what you're after. The effect of server-side performance
would be buried deeply behind: performance of the Internet, the
client's Internet connection, the client's geographic location, the
client's browser and possibly other software, and the client's computer
hardware. It would be impossible to extract server performance from the
mix.

If what you want is data about server performance, most web server
software packages provide some mechanism for obtaining this
information, at per-request times or even at high-level statistical
charts and graphs.

For instance, if you're using Apache, it comes with something called
the "Scoreboard". I've never used it myself, but I understand that it
can give you detailed high-level analysis of server performance. For
per-request data, there's a field somewhere that you can add to the log
that will tell you how long it took from the time the server received
the request to the time the server completed it.

If you really need that outside view, you might consider writing a
script (but not in client-side JS-- PERL, Python, or something) that
runs on another server that will make periodic requests to check
response times, or if you're on a large budget, use a service like
Gomez (gomez.com) that does this for you at various points directly on
various backbones of the Internet.

 

[RobG]

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>Δ&nbsp;: ' + padZ( (now - oT)/1000, 3 )
+ '</b>&nbsp;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='none';
">◊&nbsp;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>