Question about "Put SCRIPTs at the bottom" advice

I have read the advice about putting开发者_Python百科 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.

---

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.

---

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.

---

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.

---

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.