When do you choose to load your javascript at the bottom of the page instead of the top?

Question

I have seen JavaScript libraries being loaded at the top and bottom of the page.

I would love to know when to make these choices. All the JavaScript code I've written all work at the top of the page, which includes jquery plugins.

When do i load my script at any of these positions?

lollll! I think he is talking about putting you script at the bottom of the page. — Tebo, Dec 07 '09 at 16:10
Sorry if I wasn't clear enough. I meant: put your js code as close to the bottom as possible without breaking anything. If you move some code to the bottom and get a js error, you've gone too far :-) — Mauricio Scheffer, Dec 07 '09 at 20:25

score 11 · Accepted Answer · answered Dec 07 '09 at 15:00

11

Top: When having JavaScript events function on elements immediately is more important (so if you use a DOM Ready event to load everything, this is the wrong place)

Bottom: When loading the content is more important

answered Dec 07 '09 at 15:00

Quentin

800,325
104
1,079
1,205

I like this, it's precise. Could you explain a little more on the "Top" scenario, i not quite clear on it. – Tebo Dec 07 '09 at 15:15
1

You may have parts of the page that you want the js to start working immediately after it renders on the page (ie: main navigation with flyout subnav). In this case, you would want the navigation js to be loaded at the top and trigger when the div containing the navigation is ready, instead of when the the entire page is finished loading. – Ken Earley Dec 07 '09 at 15:27
To give another example of when to put something at the top, see my answer here: http://stackoverflow.com/questions/703783/hide-jquery-accordion-while-loading/704022#704022 – Jerph Dec 23 '09 at 20:03
1

I would point out that if you load it at the bottom, you don't have access to any jQuery functionality for "inline" javascript that runs at page load time (i.e. "$ undefined") ref: http://stackoverflow.com/a/8556006/32453 – rogerdpack Jan 22 '17 at 04:27

nickf · Answer 2 · 2009-12-07T15:20:14.170

7

Yahoo says to Put Scripts at the Bottom. Google says something similar but not as clearly.

edited Dec 07 '09 at 15:20

answered Dec 07 '09 at 15:02

nickf

499,078
194
614
709

Yes; CSS at top, JS at bottom. – Upperstage Dec 07 '09 at 15:09
1

Google's PageSpeed says the same. For pages loading a couple hundred K of JS or more, this makes a significant load time improvement. – James van Dyke Dec 07 '09 at 15:13
thanks James, I've added updated with the Google recommendation now too. – nickf Dec 07 '09 at 15:20
And both say that for performance reasons. Performances isn't always the most important thing. Beware of premature optimization. – Quentin Dec 07 '09 at 15:30
@David: True. That's the main reason i asked this question, because i had this feeling that it isn't. – Tebo Dec 07 '09 at 15:35
Deciding where to put JavaScript for loading speed isn't premature optimization. – Nosredna Dec 07 '09 at 15:36
Deciding where to put JavaScript **based** on loading speed without considering any other factors **is** premature optimisation. – Quentin Dec 07 '09 at 16:06
2

The great majority of web pages don't have any special requirements that would indicate moving the js to the top. Therefore, the case that usually works the best (js at the bottom) should be employed unless something comes up to invalidate the use of the default. Premature optimization is spending time worrying about speed. A default of putting js at the bottom requires not extra thought or effort. – Nosredna Dec 07 '09 at 20:59
I agree with Nosredna. By default, it's best to put the javascript at the bottom. It makes certain that the html is rendered first and the user will see content quickly. However, once you notice that **important interaction** is being affected by this practice, it is then time to move just the right amount of javascript to the top, allowing that code to be utilized before the page is completely loaded. – Ken Earley Dec 07 '09 at 21:59

score 2 · Answer 3 · answered Dec 07 '09 at 15:04

The reason you do it at the bottom of the page is because if you put it at the top of your page then the rendering of your page will wait for these files before it renders. This is why a lot of people put JavaScript at the bottom of the page as it allows the entire page to be rendered then the JavaScript is loaded.

There's very rarely any reason you'd want to put the JavaScript at the top of the page, and unless you have an explicit reason you want the JavaScript loaded in before the main page then put it at the bottom. Most optimization guides suggest putting it at the bottom for this reason.

score 2 · Answer 4 · answered Dec 07 '09 at 15:11

I place all CSS in the HEAD to avoid excessive screen paintings and flashes of style.

I place most JavaScript file requests at the bottom of the page so that the page can render quickly (HTML/CSS loading will block until script tags above them have been loaded and processed). Any code that needs to be executed after the library files have loaded are executed onDOMReady, which is all code except for library initialization. I pretty much followed Google's PageSpeed recommendations.

I've been thinking about using LABjs as well to further decrease page load times, but this works well enough right now.

score 1 · Answer 5 · answered Dec 07 '09 at 15:07

Because of the fact that browsers have to pause displaying content of a page when it's parsing a Javascript file, the recommendation is to load the Javascript at the bottom of the page to speed up displaying a page's content. This works best if your website can be rendered without any Javascript executing to modify the page because the page will be available for user interaction even if a script hangs for longer than expected.

score 1 · Answer 6 · answered Dec 07 '09 at 19:53

When the browser encounters a script element it has to evalute the JavaScript contained in that element because the script might alter the content of the page (via document.write) or inspect the current state of the page.

If the script element loads script using the src attribute, loading of other resources (JavaScript, CSS, images, etc.) will be blocked until the current script is loaded.

Both of these factors can slow down the perceived load time of your page.

If your JavaScript does not alter the page or if it doesn't need to inspect the state of the page until it has loaded you can mark your script element with defer="defer" (supported by IE 6+ and Firefox 3.5+) which indicates that the evaluation of the script can happen "later". Moving your script elements to the bottom of the page effectively does the same thing - since your scripts appear at the end of the document they'll be evaluated after CSS, images, etc. are loaded and the HTML is rendered.

score 0 · Answer 7 · answered Dec 07 '09 at 15:08

0

I put all external scripts (such as Google analytics) at the bottom so their lag does not effect the loading of the DOM.

answered Dec 07 '09 at 15:08

Josh Stodola

77,975
43
178
222

score 0 · Answer 8 · answered Dec 07 '09 at 15:10

Simply put, if your script have snippets that would start executing right away (outside all function(){} bodies) and that access DOM elements, it should go at the end of the page so that DOM would have been built and be ready to be accessed by the time the script starts executing.

If you are accessing DOM only from function calls (like onload, onclick etc), you can put the script safely in the head section itself.

score 0 · Answer 9 · answered Dec 07 '09 at 19:39

0

I put a small script in the head that does anything I want done before the rest of the page renders, and loads any other required scripts onload, or as needed after the document loads.

answered Dec 07 '09 at 19:39

kennebec

94,076
30
99
125

When do you choose to load your javascript at the bottom of the page instead of the top?

9 Answers9

Linked