2

I have read the advice about putting SCRIPTs at the bottom (e.g. Is "Put Scripts at the Bottom" Correct?) and I understand the concept.

However, I have a doubt.

If I have an OnClick even that calls a JS function that will fail if the javascript include file has not loaded. I could work around this, but its pretty convoluted.

The nub of my thinking is that after the first page has loaded the script will be cached in the client's browser, so after the first page it won't make any difference to performance where I put the SCRIPT include directive, but it may well make a difference to my OnClick event.

I can see that loading some huge Javascript library is going to be slow, on the first page, potentially causing some/many users to "click off". But for the second-page onwards is there any benefit in having scripts at the end of page?

I'd be grateful for any clarification in case I'm being really thick and overlooking something important; thanks.

Community
  • 1
  • 1
Kristen
  • 4,227
  • 2
  • 29
  • 36
  • 2
    I have accepted an answer on all my questions where I received an answer to my question. On most of my questions I have received plenty of helpful advice, but not an actual answer to my question. Where I don't have an acceptable answer I do my best to provide a response indicating why, plus I up-vote all useful responses. – Kristen Sep 03 '10 at 19:39

4 Answers4

4

It doesn't really matter where you put the scripts, especially if you're using a JS framework with a proper onPageLoad event (like jQuery's ready() )

However, for scripts that load externally, like analytics codes, advertising et al. it is VERY important to put them at the bottom of the page. This is because even if the user has caching enabled, caches get refreshed, some of the scripts use iframes to load their content without caching (ie advertising). If these weren't put at the bottom of the page then the browser hangs on loading them and as is often the case, the server they're on can be very slow to respond.

Swizec Teller
  • 2,322
  • 1
  • 19
  • 24
  • Thanks. You make a good point about 3rd party libraries, although my point was intended to be related to libraries supporting code that we execute "in the page", and, as it happens, we don't have any 3rd party libraries for that. We do have Google Analytics, and now I think about it we do have that right at the bottom :) – Kristen Nov 21 '09 at 19:10
2

You should put your own scripts in the head, and external scripts at the end of the page.

If your server is working properly, the internal scripts will load quickly, so their load time will hardly be noticable. If your server is slow, the page will be just as slow as the scripts to load, so then it doesn't make much difference where you load them.

The scripts that you load from a different server can be slow to load sometimes, that's why you want them at the end of the page, so that your page is not as much relying on them.

A while ago we moved some external scripts furhter down the page so that they loaded after the closing tag of the form, that enabled the users to post the form even if the external script hadn't loaded yet.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 1
    Good point about external / off-site scripts being hosted on a server that turns out to be Down and that causing the whole page rendering to be "wrecked". We host, e.g., JQuery include scripts on our own server (rather than using, say, Google's code-server) so that we have tight control of the outcome. – Kristen Nov 21 '09 at 19:18
1

For example, in jQuery you can add an ready() event that will fire when the page is ready. This way you event can call functions that are loaded at the end of the file. This way is not very convoluted or difficult.

I think there is benefit in placing the script tags at the end of the page, especially if the files you're trying to load are slow and so blocking the page.

Peter Stuifzand
  • 5,084
  • 1
  • 23
  • 28
  • I'm probably being thick again, but even if I use READY() how does that help me with an OnClick event? If the user clicks it before my late-loading library has finsihed loading, or if they click it before the READY() even has fired (and some unobtrusive JS has modified the OnClick event for that element), the user won't get my intended OnClick action at all - will they? In which case rendering the content such that the user can see it "sooner" is of no benefit if they can't then Click anything UNTIL the JS has finished loading - but perhaps I'm missing something?? – Kristen Nov 21 '09 at 19:15
0

Where to put your JS also depends on whether you're supporting non-JS users or not.

If you are building following the idea of progressive enhancement, the page button should function in a satisfactory way without the JS. The JS would just override the non-JS functionality. I think this is often a practical requirement in the idea of putting all your JS to the bottom of the page.

In cases where the page doesn't function without JS (or where the benefit of the JS functionality is significant) I'd add the necessary JS to the header.

Marcus
  • 5,083
  • 3
  • 32
  • 39