Email conversation
| From | John Chan |
|---|
| To | Me |
|---|
| Subject | Browser Speed Comparisons Testing Method |
|---|
| Date | 11 August 2005 15:07 |
|---|
Hello Mark Wilton,
[Ed. Why do people have such trouble getting my name right?]
I'm doing a report on implementing CSS on our website and I'm curious how
you measured the time when a page has loaded on a browser. What I want to
do is measure the time it takes to load an old web page withot the use of
CSS and measure the time it takes to load the same page but with CSS
implemented and compare them. Could you tell me what method you used to do
the tests in your Browser Speed Comparisons?
Thanks a lot,
John
| From | Me |
|---|
| To | John Chan |
|---|
| Subject | Re: Browser Speed Comparisons Testing Method |
|---|
| Date | 11 August 2005 15:28 |
|---|
John,
> I'm doing a report on implementing CSS on our website and I'm curious how
> you measured the time when a page has loaded on a browser.
depends on what you want to test. Personally I use a tiny javascript to do
the timing. Loading times can be done using a frameset. Rendering times can
be done on the page itself.
If you want to just test how long it takes to render, at the start of the
head section, use this:
<script type="text/javascript">
var startedAt = new Date();
window.onload = function () {
alert( (new Date()).getTime - startedAt.getTime );
};
</script>
If you want to test loading and rendering times, use this (pages must all
come from the same server):
A parent page holds an iframe. In the iframe is simple page with a link to
the page you want to test. When you click the link, it does something like
this;
onclick="parent.startedAt = new Date();"
Then the page you are testing uses this:
<script type="text/javascript">
window.onload = function () {
alert( (new Date()).getTime - parent.startedAt.getTime );
};
</script>
Note that onload is not 100% accurate, as some browsers fire it before
loading images, some fire it afterwards. To be accurate, you would need to
use onload="checkIfAllHaveLoaded()" in each image tag, and then
checkIfAllHaveLoaded can count to see if the correct number of images have
loaded, and the page itself has loaded. if they have, then it is ready.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | John Chan |
|---|
| To | Me |
|---|
| Subject | Re: Browser Speed Comparisons Testing Method |
|---|
| Date | 12 August 2005 15:11 |
|---|
Hi Mark,
Thank you very much for you reply. I knew it had to be some javascript and
not some old fashioned timer!! :-)
Sincerely,
John
| From | John Chan |
|---|
| To | Me |
|---|
| Subject | Re: Browser Speed Comparisons Testing Method |
|---|
| Date | 12 August 2005 20:03 |
|---|
Hi Mark,
I think you made a mistake on the code that the test page should contain:
<script type="text/javascript">
window.onload = function () {
alert( (new Date()).getTime - parent.startedAt.getTime );
};
</script>
The alert outputs NaN or infinity with the above code. I believe you
missed the function brackets :-)
<script type="text/javascript">
window.onload = function () {
alert( (new Date()).getTime() - parent.startedAt.getTime() );
};
</script>
Anyways, I used an iframe with a simple page with a link to the test page
like you suggested. The above code works brilliantly on Mozilla/Netscape
browsers but does not work on Internet Explorer. The script produces an
error in IE saying "unexpected call to method or property access".
Do you know what the problem is?
Many thanks,
John
| From | Me |
|---|
| To | John Chan |
|---|
| Subject | Re: Browser Speed Comparisons Testing Method |
|---|
| Date | 13 August 2005 00:31 |
|---|
John,
> The alert outputs NaN or infinity with the above code. I believe you
> missed the function brackets :-)
indeed I did ;)
That's what happens when I write stuff from the top of my head instead of
looking at what I was already using.
> The above code works brilliantly on Mozilla/Netscape browsers but does not
> work on Internet Explorer.
Works beautifully in Opera too. Works in everything except IE in fact. IE
sucks. but we already knew that. Anyway, looking back at what I did myself,
I can see the problem.
IE associates the date object with the initial page in the iframe. That is
wrong, since it is created in the parent, but IE gets its scopes wrong. What
do I expect? ;)
Anyway, the solution is not to use the initial page in the iframe, just have
a blank page. The link needs to be in the parent page, that way IE creates
it with the correct scope:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Testcase</title>
</head>
<body>
<p><a href="testEnd.html" onclick="window.startedAt = new Date();"
target="theframe">test</a></p>
<p><iframe src="teststart.html" name="theframe" width="100%"></iframe></p>
</body>
</html>
Tarquin