HTML5 Boilerplate and jQuery

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.

Answer 2

Where to place Javascript in a HTML file? covers why it is good to put javascript at the bottom of your page. Basically, because it makes your page load faster.

window.jQuery || is checking to make sure you downloaded jQuery from the CDN. If not (lets say the CDN was down), it will use your local file.

Answer 3

It is always best to have JavaScript after the content, that way the JavaScript does not block the page loading.

See Steve Sounder's blog post for more information.

The window.jQuery || part loads jQuery from the locally hosted copy if the CDN copy is unavailable.

Basically the script tag is loading jQuery from Google's servers which are really fast and located all around the world. Plus since a lot of sites load jQuery from Google's servers many people have it cached in their browsers. Either way people will get it really fast.

The problem is that if Google's servers are down it will fail to load jQuery. To protect us from that unlikely occurance on the line after jQuery is loaded from Google we have a JavaScript expression. It is a conditional expression A OR B. In this case the left hand side of the expression is the jQuery variable, if it was loaded successfully from Google this will be the jQuery global object which is a "truthy" value in JavaScript it will evaluate as true. Since in an OR expression if one side is true there is no need to evaluate the B side JavaScript will never execute the rest of this line of code. This is called short circuit evaluation.

If jQuery failed to load from the Google CDN the global jQuery variable will be undefined. This is a "falsey" value, so JavaScript will execute the right side of the OR expression. The right side in this case writes a new script tag on the page. The new script tag loads jQuery from a relative domain, meaning the same server that is hosting this site. It may not be as fast as loading it from Google, but at least we know it will work.