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).