Javascript loading: HTTP requests -v- Asynchronous loading

Question

I find it difficult to decide which approach is better in terms of site performance.

Either have all the necessary jQuery plugins in one file that will be included on each page of the site, or split the plugins into separate files and use the jQuery.getScript () method to load them as needed.

Is there any real benefit to loading scripts asynchronously on a single HTTP request?

All my Javascript will be reduced and gzipped.

Thanks!

Answer 1

It is not so simple and depends on the distribution of javascript on your site. Take a look at this question: What is better for loading JavaScript: compress everything in one large file or download everything asynchronously?

Answer 2

From my point of view, the best solution so far is controljs

Read the full post http://www.stevesouders.com/blog/2010/12/15/controljs-part-1/

Answer 3

One query would be better for performance. Period. The only drawback is that every time one of the files changes, everything changes (and it will need to be downloaded again). Plugins will not change much, so I put everything (as much as possible) in 1 file.

Put the jQuery core in this file. And your custom javascripts. Just make sure it is in the correct order :)

Answer 4

Try connecting the YSlow plugin to Firefox and try the various settings.

However, minimizing js into a single file will be an easy way with great results. You will get one file, and it is often much less than the sum of the parts.