$(document).ready() and script locations
I'd like to know how $(document).ready() works, along with scripts in general. Say I have scripts that are at the bottom of the page (for performance reasons I'm told?). As an example: say you have a link and you need to prevent it's default action ( preventDefault() ). If the script is at the bottom of the page, isn't it possible that the user can see the page and click the link before the browser knows not to follow the link?
Scripts in the 'head' section are evaluated at the point where the script tag is loaded into the browser (ie before the body). Script tags at the end of the document are also executed when they are encountered by the browser as it parses the page - so before the 'document ready' event. The 'document ready' event is fired when the whole page is loaded - ie when the browser parses the '</html>' closing tag.
So yes, if it takes a while to load and execute a script that disables links at the end of the document, the user could click a link in the mean time.
One option is to operate in reverse - ie load the page with links disabled, and have your javascript enable them. Or, use 'live' or 'delegate' in scripts at the top (after jquery is loaded) so that links are affected as they are created.
Look here for some complexities regarding how browsers handle dynamically loaded scripts slightly differently.
If the script is at the bottom of the page, isn't it possible that the user can see the page and click the link before the browser knows not to follow the link?
In my experience, yes it is possible. I came across this when styling a table with odd/even colouring from document.ready() (serverside rendering is better, I know). With the script at the top the display was seamless. With the script at the bottom there was sometimes a noticeable delay between loading the HTML page and rendering the rows. This is with a small table too.
The reason that it's recommended you put scripts at the bottom is the way script loading works in HTML. Every time the browser hits a <script> tag, page loading stops until that script is loaded (or retrieved from the cache). If that script is at the bottom, the page is already loaded so the user can see something. If the script is at the top the user will see a blank page until the script loads.
Normally such delays are irrelevant but sometimes they are. Also, as in my example, if your Javascript has visual effects it might be a better user experience to not render the page then change it.
Yahoo recommends putting all scripts at the end of your document for performance - http://developer.yahoo.com/performance/rules.html
but as you can read in the docs, $(document).ready()
Specify a function to execute when the DOM is fully loaded.
with that said, I don't think you really have to worry about $(document).ready() .
I guess $(document).ready() being put in the bottom will just fail if the internet connection is so slow. I can't think any other situation for that to fail.