Thanks to a bunch of projects over the years I've learnt one or two handy tricks to make sure web pages load quickly, but there's always something new to learn!
In the past I've always tried to delay loading JavaScript files until the very end because most browsers block the loading of other files when they hit a <script type="text/javascript" src="xyz.js"> tag ... I guess it makes sense as the script being loaded may make some fundamental changes to the page layout.
But what if you do have a load of scripts that you need to load, but they won't really be relevant until the page is displayed anyway (ajax helper libraries, entry validation etc)?
Well, you can fool your browser into loading them just like ordinary files outside the control of the JavaScript engine - and the great thing is that the code is pretty simple and flexible (which was good as I had to drop it into a site where I've not looked at the code in over two years but other folks have added a bunch of scripts and couldn't work out why the page load had got significantly worse!
function loadJavaScriptAsync()
{
var args = arguments.length;
for (var i=0;i<args;i++)
{
document.write("<script src='" + arguments[i] + "'></" + "script>");
}
}
....
loadJavaScriptAsync(
"JSfile1.js",
"JSfile2.js",
"http://remoteserver.com/scripts/JSfile3.js",
"jsFile4.js");