Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Although common practice, putting <code>script</code> tags in the <code>head</code> is not usually a good idea, as it holds up the rendering of your page until those scripts have been downloaded and processed (barring your use of <code>async</code> or <code>defer</code> and the browser supporting them).</p> <p>The usual recommendation is to put <code>script</code> tags at the very end of the <code>body</code> tag, e.g., just before <code>&lt;/body&gt;</code>. That way, all of the DOM elements above the script will be accessible (see links below). One caveat on that is that there can be a brief moment when your page has been at least partially-rendered but your scripts not processed (yet), and if the user starts interacting with the page, they may do something to raise an event that your script hasn't had time to hook yet. So you need to be aware of that. This is one reason for <em>progressive enhancement</em>, which is the idea that the page will work without JavaScript, but work better with it. If you're doing a page/app that just won't work without JavaScript at all, you might include some <em>inline</em> script at the top of the <code>body</code> tag (e.g., <code>&lt;script&gt;minimal code here&lt;/script&gt;</code>) that hooks any bubbling events on <code>document.body</code> and either queues them for action when your script is loaded, or just asks the user to wait.</p> <p>Using features like jQuery's <code>ready</code> is fine, but not really necessary outside of libraries (e.g., if you're in control of where the <code>script</code> tags will be, you don't usually need to use it; but if you're writing a jQuery plug-in that needs to do something on load [which is relatively rare, normally they just wait to be called], you usually do).</p> <p>More reading:</p> <ul> <li><a href="http://developer.yahoo.com/performance/rules.html" rel="nofollow">YUI Best Practices for Speeding Up your Website</a></li> <li><a href="http://groups.google.com/group/closure-library-discuss/browse_thread/thread/1beecbb5d6afcb41" rel="nofollow">Google on when the DOM will be ready</a></li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload