Requiring JS files at bottom of document presents usability issues

This is more of a best practice question.

I recently began using the HTML5 boilerplate for a bunch of projects I have been doing but recently discovered something that could be an issue. Another developer brought to my attention that it may be an issue loading JS files at the bottom of the document due to certain functionality not working on page load( ie. form using jQuery $.ajax) and in turn presenting some usability issues. I 开发者_开发问答wanted to get some opinions on what is the best way to address common issues like this that may arise. I have been using HTML5 boilerplate as I know Paul Irish and friends have really thought out this system and are constantly improving upon it.

Example issue: Home page of site has newsletter sign up form that uses the jQuery $.post function to submit values of form. User has access to enter values and press submit but this will render no action as js is not loaded presenting usability issues.

What is the best way to work with JS included at the bottom of the site?

Ideally you shouldn't be using JS as the sole enabler of an action/activity. Your site needs to be made with functionality that will work regardless of whether JS is present or not. JS just needs to add that extra layer. If you follow this rule, it won't matter where you include your JS.

At any rate, if you do include it at the bottom as @thrtydot mentioned, there is only a few seconds difference (unless your HTML is so long that there is a big gap between the top of the page and area where JS is loaded - in which case you have bigger concerns to worry about) and shouldn't matter in the long run

My recommendation would be this:

• put all your SCRIPT elements at the bottom of the page
• let the jQuery script be in the first SCRIPT element
• let the second SCRIPT element contain a ready() handler for the behavior that you want to become available as soon as possible

Like so:

<script src="http://ajax.googleapis.com/.../jquery.min.js"></script>  
<script>
    $(function() {
        // bind the handler to the newsletter submit button
        // etc.
    });
</script>
<!-- all other external and inline scripts should be below this line -->
<script src="pluginA.js"></script>
<script src="pluginB.js"></script>
<script>
    $(function() {
        // other page load code
    });
</script>

This is the best you can do.

Btw, users expect the page to be broken for the first couple of seconds anyway. I experience this all the time on Facebook, Youtube, ...

With your Ajax form you are probably binding a submit or click event to fire the Ajax call, right? And that binding can only be done when the DOM has loaded (using the jquery ready method). So your code is getting executed after the HTML body has rendered, which means you could load it at the bottom of the body.

If you are seeing problems where users try to submit before the Ajax functionality has bound then you could have a visually 'disabled' state on the button until the binding occurs.

However, by loading script files in the head you block rendering of anything so users get a blank page. Generally it's a better experience to get the content even if you have to wait a moment for the functionality.