Question

I was wondering why the boilerplate from http://html5boilerplate.com/ declare jQuery after web content? Is there are a good reason for this?

This is a snippet of the code…

  <!-- Add your site or application content here -->
    <p>Hello world! This is HTML5 Boilerplate.</p>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

P.S. what does window.jQuery || part do?

Answer 1

It checks if the CDN copy loaded correctly. If not, it loads a local copy.

---

When jQuery runs on the page, it creates a global jQuery variable. This can also be accessed as a property of the global object: window.jQuery. If jQuery hasn’t run, window.jQuery will be undefined.

The || is a shorthand version of the following:

if ( window.jQuery == undefined ) {
    document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>');
}

This way, if Google’s CDN is down (or if the browser cannot access ajax.googleapis.com) your site doesn’t break. Instead, an identical copy of jQuery will be served from your domain.

---

The reason it’s at the bottom is because that’s what Yahoo’s performance guide recommends:

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

[…]

If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

For more info on this, refer to Steve Souders’ excellent article on this topic.