Combining javascripts into a single file

Question

Having read up recently on yahoo's web optimisation tips and using YSlow I've implemented a few of their ideas on one of my sites http://www.gwynfryncottages.com you can see the file here http://www.gwynfryncottages.com/js/gw-custom.js.

While this technique seems to work perfectly on most occasions, and really does speed up the site, but I do notice a significantly higher number of errors where the javascripts don't load or don't load completely while I'm working on the site so three questions:-

• is combining scripts this way a good idea at all in terms of reliability?

• is there any way to measure the number of errors i.e. the number of times the script failed to load?

• is there any way to 'pre-load' the javascript or ensure that the number of loading errors is reduced?

Answer 1

Firebug is a nice tool that helps developing javascript application and let you see the errors and debug it. Furthermore it shows you the network activity of your site and what is going wrong.

There is also the error console in firefox that shows you the errors.

Answer 2

I can't see the load function in your code which is being called on your body tag! I'd try and steer clear of adding JS to your HTML file, it can be added dynamically and will prob cause you less hassle along the way aas well as being easier to maintain.

I'd say that the things you need to look out for are making sure that you're not trying to call something before it's defined (maybe your seperate JS files were defined in a different order to how they appear in the single JS file).

Firebug for firefox is a good development tool, if you've not found it already. Webkit, Opera and IE also have various other dev tools.

Answer 3

Of course it's good. You will not only decrease HTTP requests but you will cut down delays in downloading other resources.

Try using minify: http://code.google.com/p/minify/, I've been using it and I've no complaints.

I can assure you that combining files WON'T cause any errors as a combined script is the same as 10 non-combined scripts, they all load in the same way (In an ordered way, left to right, top to bottom). Double check the way you're combining them.

Answer 4

Script execution stops at serious errors. If you have multiple scripts, the others will still run; if you packed everything into one big file, a lot more code won't get executed. So combining scripts is bad for reliability, but can be good for other purposes (mainly load time).

All browsers have some sort of javascript console which will show you the number of errors. Most have some sort of developer tool too (Firebug in Firefox, Dragonfly in Opera etc).

I'm not sure what you mean by preloading. Since a javascript file can affect the rest of the page in various ways, browsers will fully load and execute a script tag before continuing to parse the page (which is why scripts can slow page loading down so much).

Answer 5

Combining JavaScript files is always the best way to go, unless it's not logically sane to do so (downloading jQuery from Google Code instead of hosting it yourself is a good example).
I always combine as many files as I can (JavaScript, CSS, images (CSS Sprites), etc.), also in development, and I never experience any problems. It's way faster regarding less http connections, which should not in any case be underestimated.

Regarding that you want to count the errors, I don't exactly see what you mean. But, debugging tools like the built in one in Google Chrome or Firebug for Firefox are good tools for debugging your JavaScript code, and shows lists of the errors occurring.

And to that thing of preloading: Yes, it can be done, though it'll become nasty and illogical. However, I can't think of any case whatsoever where it would be a good solution to have the trouble to preload the JavaScript, compared to just make it work right out of the box, no error checking needed.

About the error you are experiencing, the only one that my Chrome points out is this:

Uncaught ReferenceError: load is not defined

... which seems to be the onload method "load()" set on line 55 of your HTML document when the body tag is started.

Answer 6

That is a helluva script file.

You have a few evals in it, they may give problems with some minifiers, but you can always use one that simply removes whitespace and comments, that should still cut a fair amount from your file.

It is generally safe to minify minified code, it shouldn't be a worry that some of it is already minified.