Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Kwong
10,266 PointsWhy do we put the jquery script in the beginning of the html instead of at the end (near the </body>)?
I thought it is best practice to let the DOM load and then put js at the end of the html body
2 Answers
Dave McFarland
Treehouse TeacherHi Chris Kwong
Good question. The main advantage of placing your scripts AFTER the html, is that the loading of scripts won't prevent the display of content -- which might make visitors feel that the site is slow and unresponsive.
As Nick Tosto pointed out, putting JavaScript code at the top of the page is useful whenever the JavaScript programming has an immediate impact on the user interface. For example, if you've created a Carousel program that converts a series of div tags into a slideshow, you might not want to have users see the unformatted divs as the JS is loading, and then suddenly see the page change out from under them after the scripts load.
However, if the scripts are already downloaded and in your browser cache, either location in the document (the head or just below the closing body tag) is fine, and won't have an impact on page performance.
You're right, that in this case, there really is no reason to place those files in the head of the page, and could just as easily be placed before the closing body tag.
Nick Tosto
8,574 PointsIf you have scripts that are going to affect the layout of the page or that run as soon as the page is ready then it can be good to put the script at the beginning of the page so they will run as soon as possible. For scripts that don't need to be loaded immediately (forms, widgets, etc.) it's best to put them at the bottom.
However, many modern browsers now support the async attribute meaning the browser can fetch your script files while it continues to parse the page at the same time.
Chris Kwong
10,266 PointsChris Kwong
10,266 PointsThanks, this clears up a lot of things that I thought were a rule of thumb.
Ondrej Moravcik
15,223 PointsOndrej Moravcik
15,223 PointsI think in this case is the choice to place javascript in the head wrong as we are using content modification but the content may not be loaded yet - the element with the id we would like to append something just may not be there when the script is executed. It happened to me and I got an error regarding calling some function on a null object...
Dave McFarland
Treehouse TeacherDave McFarland
Treehouse TeacherHi Ondrej Moravcik
jQuery has a special function that you use to prevent JavaScript code from running before page content loads:
However, for non-jQuery code, putting an AJAX call at the end of the body is a better idea. I didn't use that approach. I'll update the teachers notes to point that out. Thanks
Ondrej Moravcik
15,223 PointsOndrej Moravcik
15,223 PointsI know but in the example shown in the tutorial - now I am not sure if it was example with jQuery or just pure javascript - was the script included in the head without any "$(document).ready( function() {...". That's why I reacted - I had to move the scripts (I added a script called gadget with the same content and then I made modifications so I had 2 scripts) to the bottom before the closing body element for the example to work correctly (but the example didn't contain "$(document).ready( function() {..." nor was at the bottom of the page)...