mrcoles.com: How tracking scripts affect page loads… can tracking scripts kill my web app?

mrcoles.com: How tracking scripts affect page loads… can tracking scripts kill my web app?

The basics of scripts and blocking

HTML content that appears after a tag will not display until the script is done downloading, parsing, and executing (blocking example)
Many javascript apps wait for the DOMContentLoaded event or an equivalent document ready event to apply functionality to the page
tags prevent the document ready event from happening until they are done downloading, parsing, and executing
If these points make sense, skip forward to tracking scripts.

Script tags block

When a browser renders a web page it reads the HTML from top to bottom. When it encounters a tag—maybe in the , maybe in the —it will halt from rendering the rest of the page, i.e. nothing else will show up, until the script has finished downloading, parsing, and executing.

Later scripts get blocked since a script can modify the page, add additional scripts, or add new variables to the window object. Some modern browsers will download multiple scripts in parallel (ie8, safari4) and future versions of browsers are expected to do this too, but, for the reasons just mentioned, scripts will still block the execution of later scripts and page content that is after a script will not be displayed until the script has finished.

Capturing the page load event

Many scripts need to wait for the page to load before they run, so they can do something simple like assigning event handlers to elements on the page or something more complex like paginating a long list (see jQuery UI or YUI). This can be done by assigning a function to run on window.load, but the window load event does not fire until the entire page has loaded—including images, flash, and applets. This means that users will be able to see and interact with the page, but not use your javascript enhancements until all the images have downloaded.

Mozilla and Opera fire a DOMContentLoaded event once the structure of the document has loaded and scripts have executed, but before the images, flash, and applets have loaded. By assigning a page load function to this event handler, all your javascript enhancements can be applied right when the page appears and often appear instantaneously to the user. It is important to realize that the DOMContentLoaded event will not fire until all scripts have downloaded and executed (more on this later).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s