JavaScript includes and DOMContentLoaded event
My article about the non-blocking behavior of javascript includes was recently published on the YUI blog. Luke Chambers asked how does this method affect DOMContentLoaded event, so I gave it a shot.
The test examples are:
Basically, I added an event listener to document DOMContentLoaded event and to the onload events of every script, image and the document. I also exaggerated the loading time of scripts and images.
Results
Normal script
tag
js: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time) DOMContentLoaded: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time) img2: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img1: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img6: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img3: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img5: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img4: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time) img8: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time) img7: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time) onload: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
DOM-included script
DOMContentLoaded: Sat Jul 26 2008 15:55:29 GMT-0700 (Pacific Daylight Time) img1: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img2: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img6: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img4: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img3: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img5: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time) img8: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time) img7: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time) script: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time) onload: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time)
In any event, the document onload waits for the script, no matter how it's included.