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
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsDocument Ready
What is a point using document ready in jquery or plain javascript when we include our script at the end of body tag?
3 Answers
Aaron Graham
18,033 PointsIf you are inserting your <script> tag at the end of <body>, you don't need $(document).ready. If you load your script before the end of <body>, the DOM isn't yet loaded so there are no elements for your script to attach to. In this situation you need to know when the document is loaded, and then run your script. Hence the need for $(document).ready().
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsDoes document ready makes script slower? I have never test it and in logic it probably makes script working slower. If yes then by inserting script tag at the end of body tag we make our website load faster for the user (it loads all included scripts when the user sees whole websites (DOM)). In that case we don't need document ready to insert in our script so it makes our website even faster (it won't be noticeable I guess ). So my question is what are the situations where I would insert script tag in my head section (if there are any pros) ? And putting document ready it is probably a good practice because we make sure that DOM is ready (especially for users who will use our code, and making sure that documents is ready is bigger advantage than unnoticeable speed).
Aaron Graham
18,033 PointsI don't think that $(document).ready() really has much of a performance impact in and of itself. You are right about the way the page loads though, and because of the way it loads, the situations where you would use $(document).ready() (i.e. <script> toward the top of your html), can make it seem like your page is loading slower. In reality, the content of your page (html, css, javascript, images...) is a certain size, and all things being equal, is going to take the same amout of time to download no matter what order it is in. I like to put the <script> tag at the bottom for the reason you stated. The page has the appearance of loading quickly. That said, I have placed it at the top, depending on what my script is doing to modify the page. If there are a bunch of elements I am using javascript to hide, I go with the <script> tag in <head>. The reason is, if you are using your script to hide elements, the page will load without them hidden, and will stay that way until your script fully loads. Once the script loads, the elements you use your script to hide will start disappearing. That can lead to a strange browsing experience for your users. The best example I can give would be a javascript carousel. Say our carousel requires the following html:
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
Once the script is loaded it hides all but one of the <li>s. If your script is at the bottom, and it takes some time to load, the list will be visible and then suddenly disappear and turn into a carousel. It probably wouldn't cause much of a usability problem, but your users might find the behavior a little strange.
I hope that clarifies it some. If you are trying to speed up your entire site, the best advice is to always be mindful of the fact that there is a network underlying the communication between your user's browser and your server. Networks have bandwidth limitations, latency, communication overhead, connection setup/tear-down times, etc. Do what you can to keep your code-base small and in as few files as possible. Minify ( concatenate and compress if possible) your javascript and css, and optimize your images. These things usually have the greatest impact on load times.
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsNice example of those hidden elements. I forgot about it and I didn't realized what is a point of linking js files in head section. I know about minify and zipping and this is probably the most important thing just like u wrote. I can't mark this answer as the best but I will mark the one above. As someone said beauty of code is in details :)
Michael Liquori
8,131 PointsMichael Liquori
8,131 PointsThe question is, though, why would you need to load script before the end of
<body>and thus need$(document).ready?