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>

P.S。 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推荐的是：

脚本引起的问题是它们会阻止并行下载。 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.

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

基本上，脚本标签正在加载来自Google服务器的jQuery，这些服务器速度非常快，遍布全球。此外，由于许多网站从谷歌服务器加载jQuery，很多人都将其缓存在浏览器中。无论哪种方式，人们都会非常快速地获得它。

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

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

HTML5 Boilerplate和jQuery

3 个答案: