On a web page I have 1 script tag that contains all my minified JavaScript (I use SquishIt for .NET).
However I see that a few people prefer to load their scripts in parallel using something like requirejs or headjs.
I was wondering which is better for performance and whether combining and minifying all my JavaScript is worth the effort?
Browsers will download up to 6 files in parallel from the same domain: http://www.browserscope.org/?category=network&v=top
This includes stylesheets, images, and so on. For optimal performance, you should combine resources to make sure that no more than 6 (parallel) requests are needed to load everything on the page. This means combining script files, combining images into CSS sprites, combining stylesheets and so on. If you need to load more, you need to split the requests across domain names.
As far as minification, it depends on how big the file is. Minifying a small file won't give much advantage, but minifying a large file can make a real difference on slow network connections, even when combined with gzip compression. See https://stackoverflow.com/questions/807119/gzip-versus-minify
Solutions like requirejs are meant for loading scripts not needed to initially show the page, but needed instead to interact with it. Even there combining scripts is recommended to stay under the 6 requests threshold.
This really depends on the size and variety of your scripts. If every page on your site needs most of the scripts, combine and minify. However if alot of your scripts are specific to pages and not global, then using a dependency loader like requirejs or headjs will have value. Especially for mobile devices that.
It has been my experience that this is more of a personal preference though. Use the one that you are most comfortable with. The performance issue is minimal compared to your personal enjoyment of managing the code.
