I'm trying to writer a timer to demonstrate how long it takes to load a web page and all its content. I want to repeat the load throughout the day to demonstrate slowdown at times of peak usage.
I know there are tools like HTTP Watch and HTTP Analyzer that work at the HTTP transaction level, but I need to report the whole user experience.
I've tried
// Start timer
window.open( "http:://myurl", "");
// End timer...but as the window opens asynchronously, the timer is too small.
I really want to acheive the snippet above, but with a synchronous window.open.
I believe that I need to force an onLoad event onto thewindow, so that it fires when the document (and all its content, such as images) have finished loading.
I understand that this is done by adding an event handler to the window, so that when the page content finishes loading, it will run a function to trap the end timer, but I can't get it to work.
My best shot at the code fragment so far is:
function Showtrap() {
x.close();
alert( "Page displayed" );
}
function loadPage() {
start_time = new Date().getTime();
x = window.open( url, "temp" );
[B]x.document.addEventListener("load", Showtrap, false);[/B]
}but this gives an error: Error: Permission denied for <file://> to get property Window.document from <URL>.
or:
x = window.open( url, "temp" );
[B]x.onload = Showtrap;[/B]but this gives error: Error: Permission denied for <file://> to set property Window.onload on <URL>.
Can you tell me what I'm doing wrong?
Help.
Full text of my script so far (currently, I load it from disk)
<html>
<!--
Page to test the performance of web applications.
The page allows you to draw a very high-level graph of an applications performance,
from an end-user perspective. It simply times how long a page takes to load, then
prints the number onto the screen. It repeats the action many times, so that you
can get a good perspective of response times throughout the day.
It is NOT intended for detailed analysis - just to provide leverage to customers
wanting to demonstrate poor response times to suppliers, in a repeatable and simple manner.
Web Applications frequently suffer performance problems because
server performance is sub-optimal, for many reasons (database issues, contention, etc.).
Frequently the issue is related to user loading at peak periods of the day
(mid-morning,and mid-afternoon) but the vendors will not believe you, and it
is difficult to get repeatable data to support your argument.
There are several solutions for testing this, if the page is not "protected"
(eg HammerHead extension to Firefox), but if the application runs over SSL,
and you need to login, this can be very difficult to trap.
There are also tools for testing single transactions at a fine-grain level
(e.g. HTTP Watch, HTTP Analyzer), but they dont do repeat transactions to build a graph.
This HTML page is designed so that you can login to the application in the normal way,
establishing SSL connections, cookies, session variabless, etc., then you can navigate
to the problematic areas of your application, and performace test it within the browser.
The concept is that this HTML would then be loaded from disk, or another web server, and
you would simply copy the problematic page into the URL, set your period, then leave it to run
for 24 hours.
-->
<body>
<script>
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function trap() {
var t = new Date;
duration = t.getTime() - start_time;
log_data.innerHTML += t.getFullYear()
+ "/" + (t.getMonth()+1)
+ "/" + t.getDate()
+ " " + t.getHours()
+ ":" + t.getMinutes()
+ ":" + t.getSeconds()
+ "." + t.getMilliseconds()
+ "\t" + (t.getTime() - launch)
+ "\t" + duration
+ "\n";
}
function Showtrap() {
x.close();
alert( "Page displayed" );
}
function loadPage() {
start_time = new Date().getTime();
x = window.open( url, "temp" );
//x.document.addEventListener("load", Showtrap, false);
x.onload = Showtrap;
}
function StartLoop() {
url = document.getElementById( "page" ).value;
launch = new Date().getTime();
delay = document.getElementById( "delay" ).value;
loadPage();
intervalID = setInterval( loadPage, delay*1000 );
document.getElementById( "start" ).style.visibility = "hidden";
document.getElementById( "stop" ).style.visibility = "visible";
}
function StopLoop() {
clearInterval( intervalID );
document.getElementById( "start" ).style.visibility = "visible";
document.getElementById( "stop" ).style.visibility = "hidden";
}
function ClearLog() {
log_data.innerHTML = "";
}
</script>
Page to fetch (dont forget http:// or https://) : <input size=50 id=page />
Every <input size=5 id=delay value=60 /> seconds
<input id=start type=button style="color: white; visibility:visible; background:green;" value="Click to start" onClick=StartLoop(); />
<input id=stop type=button style="color: white; visibility:hidden; background:red;" value="Click to stop" onClick=StopLoop(); />
<input type=button style="color: red;" value="Clear performance data" onClick=ClearLog(); />
<h1>Timings</h1>
<pre>
Time From start Duration (milliseconds)
</pre>
<pre id=data>
</pre>
<script>
log_data = document.getElementById('data');
</script>
</body>
</html>