Is this the best way to include javascript on your website? http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-content-download-on-your-website-during-page-load/
+3
A:
The best way to include JavaScript on your website is to include as few files as possible at the end of the page*, after all of the markup and other assets have been loaded. Doing it that way also has the added benefit of encouraging a "progressive enhancement" development model.
*Yahoo actively spends a great deal of money researching this and has dedicated, full-time people (including the brilliant Steve Souders) who publish their findings online and in book form.
Rex M
2009-03-18 14:54:18
Note that Internet Explorer still tries to load them before the rest of the page, which leads to some fairly serious errors. To get that to work properly, you need to include a 'defer' attribute in the script tag.
DNS
2009-03-18 15:00:03
@DNS i am not sure if that is correct. IE will load resources in the order they are referenced in the markup. If scripts are listed last, they are loaded last. Defer is actually less reliable, as it does not always delay until the page is fully loaded.
Rex M
2009-03-18 15:04:31
@Rex M: IE will not execute the resources in the order they are referenced in the DOM if they are added to the DOM using the technique the asker is asking about. See my answer for deets.
Crescent Fresh
2009-03-18 15:31:17
@crescentfish of course this is true, since they are being added to the DOM after the fact. i think it's pretty plain to mean that resources are loaded in the order they are referenced in the original document, not if references are added on the fly after the fact.
Rex M
2009-03-18 15:44:11
@crescentfish ah, on second thought, experience has taught me not to assume anything is plain or obvious :) good point to clarify.
Rex M
2009-03-18 15:48:39
+2
A:
Doesn't seem like a one-size-fits-all situation, so I often resort to this famous article to help me answer questions like that:
karim79
2009-03-18 15:01:55
A:
It was mentioned in one of the podcasts, but if you host the javascript on a separate domain, or even a subdomain, the browser can open more connections and download both the js and the rest-of-the-page at the same time. This is why many people choose to link to google's instance of jQuery, rather than their own. This example also has cachine benefits, but the core principle holds.
Stefan Kendall
2009-03-18 15:15:35
@RBemrose: remember these are <script> tags, not XHR requests. cross-domain restrictions do not apply.
Crescent Fresh
2009-03-18 15:25:10
A:
In a nutshell the article is saying to attach <script> nodes dynamically in the DOM in order to achieve parallel downloads of script files. This works and is nothing new.
However it fails to mention the biggest drawback of the method: Although scripts will be downloaded in parallel, the order in which they are executed is not deterministic. IE will execute them in the order they finish downloading in, whereas Firefox executes them in the order they are attached in the DOM.
This is a problem. For example, say script A and script B are added using that technique. Now imagine script A is jQuery, and script B does this:
$(document).ready(function(){...})
In IE you're screwed if for whatever reason (eg, network traffic, cache miss) script B finishes downloading before script A, because it will be executed before jQuery has been loaded.
See this article for a better explanation.
Rex M's answer is the way to go.
Crescent Fresh
2009-03-18 15:22:18