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>

PS 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副本.

它处于底层的原因是因为雅虎的性能指南建议:

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

[...]

如果可以延迟脚本,也可以将其移动到页面底部.这将使您的网页加载速度更快.

有关这方面的更多信息,请参阅Steve Souders 关于此主题的精彩文章.