Articles :: JavaScript :: Does JavaScript load on page load or on onload?
written by Toby Miller on November 6, 2006 November 6, 2006
JavaScript has an onload event which triggers after an html page has finished loading. The part that I found interesting was that the different web browsers all seem to have their own definition of when a page has finished loading. What my investigations uncovered was interesting, at least I thought so. =)
Before getting into the investigation let's get some definitions out of the way so that we're both on the same page.
scanned order - I use this phrase to refer to the order in which all source code would be visible for human scanning if all external files (css, js, vbs, etc) were written directly to the html source code.
scanned html order - This is the same as scanned order except that it only refers to html source code.
Now for the results of my investigation. This is the order that I learned things were actually executing in the big three web browsers (Firefox, IE and Safari). I only used the versions installed on my development machines so your miles may vary, but if you find something that I didn't or something that I just totally missed let me know.
Firefox 1.5.0.7 (Windows XP)
- All html source code is downloaded.
- All external source code elements are downloaded (css, js, vbs, etc).
- All css is executed in scanned order.
- All foreground images are added to the download queue.
- All background images are added to the download queue.
- All javascript is executed in scanned order.
- All onload events are triggered once the foreground images are cleared from the download queue.
- All background images continue to clear from the download queue.
- All other html events are made active.
Firefox Synopsis - Firefox adds foreground images to its download queue before adding background images. Onload events do not trigger until all foreground images have finished downloading (background image download status does not matter).
IE 6.0.29 (Windows XP)
- All html source code is downloaded.
- All external source code elements are downloaded (css, js, vbs, etc).
- All css is executed in scanned order.
- All foreground and background images are added to the download queue.
- All javascript is executed in scanned order.
- The body onload event will trigger once the foreground and background images are cleared from the download queue.
- After the body onload event triggers (if set) all other onload events will trigger.
- All other html events are made active.
IE Synopsis - IE does not differentiate between foreground and background images with regards to download queue management. Onload events do not trigger until all images have finished downloading and the onload parameter hard coded into the body tag will always execute before any other JavaScript onload events.
Safari 2.0.4 (Mac OSX)
- All html source code is downloaded.
- All external source code elements are downloaded (css, js, vbs, etc).
- All css is executed in scanned order.
- All background images are downloaded.
- All foreground images are downloaded.
- All javascript is executed in scanned order.
- All onload events are triggered according to scanned order once the foreground images have downloaded.
- All other html events are made active.
Safari Synopsis - Safari downloads background images before downloading foreground images and all images are loaded in scanned html order as opposed to via a queue. Onload events do not trigger until all images have finished downloading.
So the next time you get ready to use an onload event, especially if you're using it to re-write some html content make sure you consider how it's handled in each of the big three web browsers first. It could save you some frustrating client discussions about "page flicker" in the future ... and no, this didn't happen to me, honestly. =P
Feel free to do your own investigations as well, here are the test files that I wrote during my investigation:
js_onload_test.tgz
For best results load up Sloppy first and point it to your copy of loadtime2.html. If you find something different I'd love to hear about it.
permalink
|
Natural Living (3)
Heating & Cooling (1)
Herbal Remedies (1)
Personal (0)
Family (1)
Humor (11)
Miscellaneous (1)
Politics (5)
Technology (2)
System Administration (4)
Linux (1)
Solaris (0)
Web Development (2)
CSS (3)
Design (1)
Flash (1)
JavaScript (10)
PHP (1)
CakePHP (1)
Web Browsers (1)
Firefox (1)
Internet Exploder (0)
Netscape (1)
|
