So I have web app with multiple JS files (jQuery, jQuery, my own JS code and more). Say I have a page named index.html. What would be the best practice to include / preload my js files? I was thinking about creating a separate JS file that will do the preloading (include all the other scripts and call jQuery.noConflict()). What do you guys suggest? Is this possible? How would you implement it?

Thanks!

So I have web app with multiple JS files (jQuery, jQuery, my own JS code and more). Say I have a page named index.html. What would be the best practice to include / preload my js files? I was thinking about creating a separate JS file that will do the preloading (include all the other scripts and call jQuery.noConflict()). What do you guys suggest? Is this possible? How would you implement it?

Thanks!

• javascript
• file
• preload

• What is speaking against just including them in the head section? The browser will take care of the caching. – Pekka Commented Jan 3, 2011 at 14:40
• If you have a lot of files, don't put them in the head. Put them at the end of the body. Create a page that looks nice without the files and then add them at the end of the body. The page you create will serve as a splash page. You can hide your splash elements once jquery loads. – Hemlock Commented Jan 3, 2011 at 14:48
• 2 @Pekka: Putting scripts in the head is only necessary if you use their functionality during the rendering of body, and slows down the perceived load-time of the page. If you don't need their functionality during rendering (and that includes the user clicking things while the page is still being built), put them at the bottom of body. More – T.J. Crowder Commented Jan 3, 2011 at 14:52

4 Answers 4

In general, bine your script files into one file (and minify or press them, or even pile them, but note that this last item is not zero-impact, there are pain points). See notes here and here. Basically, one of the first guidelines you'll see for a good fast page load is "minimize HTTP requests." So you don't want six separate script tags where you could have one.

For popular scripts, though, you may benefit from using them from Google's CDN. Google is kind enough to host most popular JavaScript libraries on their CDN for free. The advantage here being not only that the CDN will be fairly fast, but that the target user's browser may well have a cached version of the script you want to use even though they've never been to your site before.

Check out RequireJS, a smart and robust script loader for JavaScript. It's designed to work well with jQuery and es with an optimization tool to bine all of your scripts into one.

The best way is to minimize all the js files and bine them into one script. This will cause less work for the browser, as it doesn't have to make multiple requests to the server.

If you are going to load everything up at the same time, you could put it all into a single pressed file