JSPatterns.com

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:

• Normal script tag
• Script included via DOM

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.

Tags: experiments, javascript includes, performance

This entry was posted on Saturday, July 26th, 2008 and is filed under experiments, performance. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.