HTML5 Boilerplate and jQuery

Question

I was wondering why the template from http://html5boilerplate.com/ declares jQuery after web content? Are there any good reasons for this?

This is a piece of 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> 

PS what does window.jQuery || part?

Answer 1

It checks to see if the CDN copy is loaded correctly. If not, it downloads a local copy.

---

When jQuery runs on the page, it creates a jQuery global variable. This can also be accessed as an object of a global object: window.jQuery . If jQuery is not running, window.jQuery will be undefined .

|| - an abridged version of the following:

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

Thus, if the Google CDN does not work (or if the browser cannot access ajax.googleapis.com ), your site will not break. Instead, an identical copy of jQuery will be sent from your domain.

---

The reason for this is because the Yahoo Performance Guide recommends:

The problem caused by scripts is that they block concurrent downloads. The HTTP / 1.1 specification assumes that browsers load no more than two components in parallel by host name. If you serve your images from multiple host names, you can get more than two downloads that will happen in parallel. However, when loading a script, the browser does not start any other downloads even on different host names.

[...]

If a script can be delayed, it can also move to the bottom of the page. This will speed up the loading of your web pages .

For more on this, see the excellent article on this .

Answer 2

Where to put javascript in html file? explains why it is useful to place javascript at the bottom of the page. Mostly because it speeds up page loading.

window.jQuery || checks that you download jQuery from the CDN. If not (say the CDN does not work), it will use your local file.

Answer 3

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

See Steve Sounder's blog entry for more details.

Part of window.jQuery || loads jQuery from a locally hosted copy if a CDN copy is not available.

Basically, the script tag downloads jQuery from Google servers, which are really fast and located around the world. Plus, since many sites download jQuery from Google servers, which many people cache in their browsers. In any case, people will get it very quickly.

The problem is that if the Google servers are down, the jQuery download will fail. To protect us from this unlikely lineup after loading jQuery from Google, we have a JavaScript expression. This is a conditional expression A OR B In this case, the left side of the expression is a jQuery variable, if it was successfully downloaded from Google, it will be a global jQuery object, which is a "true" value in JavaScript, it will be evaluated as true. Since the 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 a short circuit rating .

If jQuery could not be downloaded from the Google CDN, the jQuery global variable will be undefined. This value is false, so JavaScript will execute the correct 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 the relative domain, which means the same server that hosts this site. It may not be as fast as downloading it from Google, but at least we know that it will work.