When to use the top or bottom JavaScript section of the Advanced Site-wide Customization?

Question

The Advanced Site-wide Customization page has options to add JavaScript to the "Top JavaScript" section or the "Bottom JavaScript" section. The page gives guidance in the form of "if you don't need it up top, put it at the bottom".

How do I determine when I need it at the top, and when I need it at the bottom? Will some things only work in one or the other? Is the bottom section before or after the </html> tag?

Answer 1

If you don't know what should go where, put it in the bottom javascript. That's a better place for things to go that don't have to be in the top javascript because the page will display faster.

These are the reasons I can think of to put something in the top javascript:

1. If you need the code to execute immediately before the page loads and displays. For example, if you want to check for some condition (e.g. a specific URL) and redirect to another page, you might as well do that before the page loads.
2. If the javascript code needs to be available or already initialized during page load because some inline scripts in the page may use/reference it.
3. If you're loading some resource for use in the page and you want the loading of that resource (image, ajax results, etc...) to be available as soon as possible, then it will start loading a little sooner if you start it from the top javascript rather than the bottom javascript - but it could slightly slow down the display of the page - it is a tradeoff.

Keep in mind that the top javascript is loaded BEFORE the page is loaded so you cannot access the page contents at all at the time that the top javascript first executes. You can place DOMReady calls in the top javascript that will wait for the DOM to be loaded, but at that point, you might as well just put the code in the bottom javascript.

The bottom javascript section is before the </html> tag, but after most other body contents.

Answer 2

From item 1 here: http://help.smugmug.com/customer/portal/articles/93381

Any JavaScript you paste into your Top JavaScript box will load quickly, but it will also slow down your page. So you'll likely want most of your JavaScript in your Bottom JavaScript box, which will load after the majority of your page is already displayed.