Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers 2

up vote 7 down vote accepted

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 http://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.

share|improve this answer
2  
note that the number 6 is setting dependant (and might increase when the next generation of internet connectivity comes along) –  ratchet freak Sep 19 '12 at 11:22
    
Re @ratchetfreak, see stackoverflow.com/questions/5751515/… –  msanford Sep 19 '12 at 14:50
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.