4

我想知道为什么来自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>

PSwindow.jQuery ||部分是做什么的？

4

3 回答 3

10

它检查 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 副本。

它位于底部的原因是因为雅虎的性能指南建议这样做：

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

[...]

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

有关这方面的更多信息，请参阅 Steve Souders关于此主题的优秀文章。

于 2013-02-01T21:00:44.250 回答
2

将 Javascript 放在 HTML 文件中的什么位置？涵盖了为什么最好将 javascript 放在页面底部。基本上，因为它使您的页面加载速度更快。

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

于 2013-02-01T21:01:31.540 回答
2

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

有关更多信息，请参阅 Steve Sounder 的博客文章。

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

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

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

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

于 2013-02-01T21:01:51.193 回答