HTML5 样板和 jQuery答案

【问题标题】：HTML5 Boilerplate and jQueryHTML5 样板和 jQuery
【发布时间】：2013-02-01 20:58:55
【问题描述】：

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

这是一个sn-p的代码...

  <!-- 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 || 部分是做什么的？

【问题讨论】：

标签： jquery html

【解决方案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 推荐的：

脚本导致的问题是它们会阻止并行下载。 HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

[...]

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

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

【讨论】：

【解决方案2】：

Where to place Javascript in a HTML file? 介绍了为什么最好将 javascript 放在页面底部。基本上，因为它使您的页面加载速度更快。

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

【讨论】：

【解决方案3】：

最好在内容后面加上 JavaScript，这样 JavaScript 就不会阻塞页面加载。

See Steve Sounder's blog post for more information.

如果 CDN 副本不可用，window.jQuery || 部分会从本地托管的副本加载 jQuery。

基本上，脚本标签是从 Google 的服务器加载 jQuery，这些服务器速度非常快，并且位于世界各地。另外，由于许多站点从 Google 的服务器加载 jQuery，许多人将其缓存在他们的浏览器中。无论哪种方式，人们都会很快得到它。

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

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

【讨论】：