HTML5 Boilerplate和jQuery

Question

我想知道为什么http://html5boilerplate.com/的样板文件在web内容之后声明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>'); 
} 

这样，如果谷歌的CDN下跌（或者如果浏览器无法访问ajax.googleapis.com）你的网站不破。相反，jQuery的相同副本将从您的域中提供。

---

这是底部的原因是因为这是Yahoo's performance guide建议：

造成脚本的问题是，他们阻止并行下载。 HTTP/1.1规范建议浏览器每个主机名并行下载至少两个组件。如果您从多个主机名提供图像，则可以同时发生两个以上的下载。然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使是在不同的主机名上。

[...]

如果脚本可以被推迟，这也被移动到页面的底部。这将使您的网页加载速度更快。

欲了解更多信息，请参阅Steve Souders'excellent article on this topic。

Answer 2

Where to place Javascript in a HTML file?涵盖了为什么把javascript放在页面底部是好事。基本上，因为它使你的网页加载速度更快。

window.jQuery ||正在检查以确保您从CDN下载了jQuery。如果没有（可以说CDN已关闭），它将使用您的本地文件。

Answer 3

最好在内容后面加入JavaScript，这样JavaScript不会阻止加载页面。

See Steve Sounder's blog post for more information.

从本地托管副本的window.jQuery ||部分负荷的jQuery如果CDN副本不可用。

基本上，脚本标记是从谷歌的服务器加载jQuery，这些服务器非常快速，位于世界各地。另外，由于很多网站都会从Google的服务器加载jQuery，因此很多人都将它缓存在浏览器中。无论哪种方式，人们会得到它真的很快。

问题是，如果谷歌的服务器关闭，它将无法加载jQuery。为了保护我们免受jQuery从Google加载后出现的不可能发生的情况，我们有一个JavaScript表达式。这是一个条件表达式A OR B。在这种情况下，表达式的左边是jQuery变量，如果它是从Google成功加载的，这将是jQuery全局对象，这是JavaScript中的“真实”值，它将评估为true。由于在OR表达式中，如果一边是真的，所以不需要评估B端JavaScript永远不会执行这行代码的其余部分。这被称为short circuit evaluation。

如果jQuery无法从Google CDN加载全局jQuery变量将是未定义的。这是一个“假”值，所以JavaScript将执行OR表达式的右侧。在这种情况下，右侧在页面上写入新的脚本标签。新的脚本标记从相对域加载jQuery，这意味着与托管此站点的服务器相同。它可能不如从谷歌载入它快，但至少我们知道它会起作用。