Where do you put your javascript?

Question

Do you localize your javascript to the page, or have a master "application.js" or similar?

If it's the latter, what is the best practice to make sure your .js isn't executing on the wrong pages?

EDIT: by javascript I mean custom javascript you write as a developer, not js libraries. I can't imagine anyone would copy/paste the jQuery source into their page but you never know.

Answer 1

Putting all your js in one file can help performance (only one request versus several). And if you're using a content distribution network like Akamai it improves your cache hit ratio. Also, always throw inline js at the very bottom of the page (just above the body tag) because that is executed synchronously and can delay your page from rendering.

And yes, if one of the js files you are using is also hosted at google, make sure to use that one.

Answer 2

Here's my "guidelines". Note that none of these are formal, they just seem like the right thing to do.

All shared JS code lives in the SITE/javascripts directory, but it's loaded in 'tiers'

For site-wide stuff (like jquery, or my site wide application.js), the site wide layout (this would be a master page in ASP.net) includes the file. The script tags go at the top of the page.

There's also 'region-wide' stuff (eg: js code which is only needed in the admin section of the site). These regions either have a common layout (which can then include the script tags) or will render a common partial, and that partial can include the script tags)

For less-shared stuff (say my library that's only needed in a few places) then I put a script tag in those HTML pages individually. The script tags go at the top of the page.

For stuff that's only relevant to the single page, I just write inline javascript. I try to keep it as close to it's "target" as possible. For example, if I have some onclick js for a button, the script tag will go below the button.

For inline JS that doesn't have a target (eg: onload events) it goes at the bottom of the page.

---

So, how does something get into a localised library, or a site-wide library?.

• The first time you need it, write it inline
• The next time you need it, pull the inline code up to a localised library
• If you're referencing some code in a localized library from (approximately) 3 or more places, pull the code up to a region-wide library
• If it's needed from more than one region, pull it up to a site-wide library.

A common complaint about a system such as this, is that you wind up with 10 or 20 small JS files, where 2 or 3 large JS files will perform better from a networking point of view. However, both rails and ASP.NET have features which handle combining and caching multiple JS files into one or more 'super' js files for production situations.

I'd recommend using features like this rather than compromising the quality/readability of the actual source code.