I have a section of a webpage that loads a JavaScript file from an external source and then kicks off an Ajax query.
When I load the page, I see the browser saying "waiting for example.com" a lot, so I think the dependency on this external JavaScript is slowing my initial page load.
Is there a way I can load this external JavaScript asynchronously so it doesn't slow the loading of the rest of my page at all?
It's good practice to put JS at the bottom, right above the closing body tag. In addition, use load events window.onload or $(document).ready() to fire your JavaScript after the page has loaded.
As far as loading JavaScript files themself asynchronously or on demand, you could inject it from another JavaScript function or event. But really you are doing the same thing as placing it at the bottom.
Check out the YSlow Guidelines for front-end optimizations.
document.write(), which I almost never use anyway) in the HEAD as it seems more semantically correct and looks cleaner grouped with all the link tags. Besides, the "waiting for" status will show up anyway when you fire the AJAX request immediately after the page loads. So to the user it shouldn't make a difference.
script tags outside the head tag. As such, there is really only an organization reason. So what's the difference between the head and bottom of the body? Agreed about the status message though.link tag is placed in the head.link tag is false. That is, in fact, part of the HTML spec and would make your page invalid if you placed it outside the head.You could use jQuery's .getScript() method, which is simply a wrapper for an AJAX call.
http://api.jquery.com/jquery.getscript/
This makes the request asynchronous, and gives you a callback that runs after the script has loaded.
You can see my answer here: Dynamic (2 levels) Javascript/CSS Loading
And grab the script from here (see the source). Use it at the bottom, and your scripts will not block other resources (and if you got more than one they will be downloaded in parallel cross-browser).
I wrote a library to asynchronously load javascript files with callbacks for when it loads:
https://github.com/ssoroka/sigma
Sigma.async_script_load('http://example.com/underscore/underscore-min.js', '_', function() {
_([1,2,3,2,3,1]).uniq();
});
deferisn't widely supported. I deleted my answer.