jquery - HTML5 样板和 jQuery

Question

我想知道为什么来自 http://html5boilerplate.com/ 的样板文件在网页内容之后声明 jQuery？这有充分的理由吗？

这是代码片段...

  <!-- 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>

附言window.jQuery || 部分做什么？

Answer 1

它检查 CDN 副本是否正确加载。如果没有，它会加载本地副本。

---

当 jQuery 在页面上运行时，它会创建一个全局 jQuery 变量。这也可以作为全局对象的属性进行访问:window.jQuery。如果 jQuery 尚未运行，window.jQuery 将为 undefined。

|| 是以下内容的简写形式:

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

这样，即使 Google 的 CDN 出现故障(或者如果浏览器无法访问 ajax.googleapis.com)，您的网站也不会中断。相反，将从您的域提供 jQuery 的相同副本。

---

它在底部的原因是因为这就是 Yahoo's performance guide建议:

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.

有关这方面的更多信息，请参阅 Steve Souders 的 excellent article on this topic .