Jquery - Can I place my jquery code in a script at the end of the html body?

Question

Will the DOM definitely be ready if I place my jquery code right before the </body> tag?

I have some jquery code and when I put it in the $.ready() function I can see a flash of what the page looks like before the javascript code is run.

However, if I put the code right before the </body> tag then I only see what the page looks like after the javascript is run. I used timers to see the time difference, and the code put before the end of the </body> executed 300ms sooner than the code in $.ready.

EDIT:If the DOM is reliably ready when i call my code before the </body> tag, what is the benefit to putting my code in $.ready, considering that my javascript will execute sooner if I put it before </body>?

Answer 1

Yes, the DOM is reliably ready at that point. This thread from the Google Closure Library mailing list may be of interest, although unfortunately as far as I know they haven't followed up with an actual article. Some quotes from Erik Arvidsson from that thread:

The short story is that we don't want to wait for DOMContentReady (or worse the load event) since it leads to bad user experience.

and (in relation to whether the DOM element immediately above a script element will really be there)

The DOM node is there and if you query for its size or something else that requires a reflow a reflow will happen so that the layout data is up to date.

Some further notes:

• If you can, load your JavaScript file from a different (apparent) host than the images and such on your page (from a subdomain, or a static service, etc.); otherwise, even though you're not waiting for a "load" event, your JavaScript file will still be at the end of the download queue. You may find that you get more flashing, rather than less, if it's at the end of the queue and you're waiting for it. (Remember that the HTTP 1.1 spec recommends downloading no more than two items from a given host simultaneously, and most browsers — and some servers — enforce that.)
• Related to that, you might consider using a CDN service for your own script (and other resources, but be sure to spread them across different apparent host names).
• The DOM will be ready, but (naturally) not all of your images and such will be.
• You can minimize apparent flashing by setting the body's background color to as closely match the dominant color of the resulting rendered page as possible, using CSS included in the page (to avoid a delay while your CSS is fetched).
• For a publicly-facing website, if you can avoid relying on jQuery for the basic rendering of the page, that's probably for the best, since not everyone will have JavaScript enabled. Of course, if your target audience is more StackOverflow-like, you're probably on a winner assuming they will. :-)
• If you use jQuery from a CDN like Google's Ajax Libraries stuff, the odds of your target user already having it loaded on their first visit to your site will improve, minimizing the delay before your code runs (e.g., while jQuery is being loaded).

Answer 2

I'm 99% sure that it will work on the DOM that is in existance before the <script> tag. This means that if it's before </body>, it will work.

I'd be curious to see if it ever worked on something after the closing </script>. Like maybe the internet loaded the page faster than the processor could begin the JavaScript code... I doubt it thought because if you do document.write, it should be at the same point where the <script></script> is at.

Answer 3

Yes, the DOM is ready by then, but you still can't be sure that you don't see a flash of the page in it's original state.

If you have something that shouldn't be visible in the page from start, you can use CSS in a style sheet to hide it initially, instead of hiding it using jQuery. That way you will be sure that there will not be a flash of the elements before you have a chance to hide them.