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
Ben Attenborough
Front End Web Development Techdegree Graduate 32,769 PointsUsing $(document).ready
I wondered why in this project we are using $(document).ready instead of linking to the script at the bottom of the html file. I was told (in another Treehouse video) that the convention is to link to js scripts at the bottom of the html file rather than using $(document).ready what are your thoughts? Is there a valid reason to do one rather than the other?
3 Answers
eck
43,038 PointsI am not entirely sure of their reasoning, but it could simply be to show that there are alternatives to how and where js can be loaded into a webpage and that the location does actually matter.
Personally, I usually place my scripts at the bottom of the body tag since I do not need to wait for the DOM in my script and my scripts do not block the loading of other assets.
There are some edge cases that you may run into where a script is more useful in other parts of the DOM, but I don't think that I have run into any.
Ben Junya
12,365 PointsHey Ben!
There's a lot of different ways of doing it. In my professional experience, I typically put the <script> tags at the bottom of the page. It can shave a couple of milliseconds off of load time.
Just for best practice, you should use $(document).ready() anyways. I find it keeps my code a little bit more organized, especially if I'm building a large webapp that has a lot of code.
There's some other tricks you can use too, like <script async> or <script defer>. Personally, I prefer using defer, because it waits for the entire page to load before executing the script.
If you want to read up more about async and defer, check out W3schools' documentation on it. It's a really solid read, and a popular interview question.
http://www.w3schools.com/tags/att_script_async.asp http://www.w3schools.com/tags/att_script_defer.asp
Robert Richey
Courses Plus Student 16,352 PointsEdit: I don't fully understand scope.
Matthew Greenberg
8,173 PointsI don't think this is quite it. If you wanted to create a scope in which you would not write to the global namespace, it is common to wrap your code in a self invoking function like this
(function(){
//write code here
})()
I believe its just personal preference. A lot of coders like to use the $(document).ready and $(window).load jquery functions to keep their javascript links in the head of their document. For smaller projects its really not going to make much of a difference in load time.
Robert Richey
Courses Plus Student 16,352 Pointsgood call. if you want to change your comment to an answer, i'll up-vote it.