你应该从哪里引用jQuery库？Google JSAPI？CDN？

Question

有几种方法可以包含jQuery和jQuery UI，我想知道人们都在使用哪种方法？

• Google JSAPI
• jQuery的官网
• 你自己的站点/服务器
• 其他CDN

我最近一直在使用Google JSAPI，但发现它需要很长时间才能建立SSL连接或甚至只是解析google.com。我一直在使用以下代码调用Google JSAPI：

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>

我喜欢使用谷歌，这样在访问其他网站时可以被缓存，并节省我们服务器的带宽，但如果它仍然是网站速度慢的原因，我可能会更改引用方式。

你使用什么？你有任何问题吗？

编辑：刚刚访问了jQuery的网站，他们使用以下方法：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

编辑2：以下是我去年一直使用而未遇到任何问题的包含jQuery的方法：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

不同之处在于去掉了http:。通过去掉它，您就不需要担心在http和https之间切换了。

- Darryl Hein

---

Darryl，编辑得非常好。我可以建议您将编辑移到页面顶部，并将src更改为您现在使用的简单/安全/快速语法吗？您的答案已经基本上成为权威，这两个更改都有助于人们快速获得他们想要的内容。 - Josh Smith

Answer 1

毫无疑问，我选择使用由Google API服务器提供的JQuery。我没有选择jsapi方法，因为我没有利用其他Google API，但是如果以后有所改变，我会考虑它...。

首先，谷歌API服务器分布在全球各地，而不是我单个的服务器位置：更接近的服务器通常意味着访问者获得更快的响应时间。

其次，许多人选择在Google上托管JQuery，这样当访问者来到我的网站时，他们可能已经在本地缓存中拥有JQuery脚本。预缓存内容通常意味着访问者加载时间更快。

第三，我的Web托管公司向我收取使用的带宽费用。如果访问者可以从其他地方获得相同的文件，则每个用户会话消耗18k没有意义。

我明白我需要对谷歌进行部分信任，以提供正确的脚本文件并保持在线和可用。到目前为止，我使用Google并没有失望，将继续使用此配置，直到不合理。

值得指出的一件事是，如果您的网站上混合了安全和非安全页面，您可能需要动态更改Google源以避免在安全页面中加载不安全内容时看到的常见警告：。

以下是我的想法：

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

更新于 2010 年 9 月 8 日 - 有一些建议认为可以通过移除 HTTP 和 HTTPS 来减少代码的复杂性，只需使用以下语法：

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

另外，如果你想确保加载 jQuery 库的最新主要版本，你还可以更改 URL 以反映 jQuery 主要版本号：

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

最后，如果您不想使用Google而更喜欢jQuery，则可以使用以下源路径（请注意，jQuery不支持SSL连接）：

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

- Dscoduc

---

我同意你提出的三个理由，这就是为什么我会在我的生产网站上引入谷歌的jQuery库。对于SSL页面的JS动态注入，我只需在脚本标签中引用URL而不指定协议即可。在我看来这种方法很好用。<script src="//ajax.google..."></script> - Aaron Wagner

除了简化的部分外，我也同意全部内容。我使用以下格式来简化：<script src="//ajax.google..."></script>，这样我就不必担心http或https的问题。感谢Aaron Wagner提供的建议。 - Darryl Hein

Dscoduc：我认为你的答案应该更新一下，加上Aaron和Darryl的简化版。他们的版本更易于阅读、加载更快、更安全。而且这个页面似乎已经成为了从Google引入jQuery的标准答案之一。 - Josh Smith

我不明白为什么要使用document.write()? 在头部简单地放置<script src="..."></script>即可。如果你的网站使用了安全的https，并且从未编码的内容（例如 http://googleapis）中获取，那么会出现警告信息。如果只使用http但链接到https://googleapis，则会有一些额外的"安全"编码开销，因此链接到http://googleapis会稍微快一点。@Dscoduc说的是它只能消除警告信息而已，并不能更快。 - vol7ron

请注意，谷歌将使用这个来追踪用户浏览的网站。因此，如果你正在制作一个需要关注隐私的网站，那么为了隐私而托管一些小文件是微不足道的代价。 - Hans-Christoph Steiner

Answer 2

你可能希望将网站托管在外部服务器上，以解决浏览器对特定服务器的并发连接限制。

然而，考虑到你使用的jQuery文件很可能不会经常更改，浏览器缓存会启动并使这一点在很大程度上无关紧要。

第二个将其托管在外部服务器上的原因是降低对自己服务器的流量。

然而，考虑到jQuery的大小，它只会占据你流量的一小部分。你应该尝试优化你的实际内容。

- Franci Penov

---

另一个原因是，用户很有可能已经在缓存中拥有了来自谷歌的jQuery，所以他们甚至在第一次访问您的网站时都不需要下载它。 - Kip

Answer 3

jQuery 1.3.1 min的大小只有18k。我认为这不会给初始页面加载带来太大的影响。之后它将被缓存。因此，我自己托管它。

- Mark

---

根据你所述的理由，我恭敬地不同意。如果网站访问量很高，那么每个会话的18000美元费用可以迅速积累到相当可观的金额。特别是如果你的网络托管服务按带宽使用量计费... - Dscoduc

我的观点是，只有当您的访问者只查看一个页面时才需要考虑这个问题。如果您的个人资料访问者较少且页面浏览量较多，则在每个访问者的页面浏览量上分摊的开销很小。对于回头客也是如此。 - Kristen

除非你的网站非常小，否则18k将始终只占你流量的一小部分。 - Hans-Christoph Steiner

Answer 4

如果你想使用谷歌，直接链接可能会更加响应。每个库都列出了直接文件的路径。这是jQuery的路径。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

刚刚重新阅读了您的问题，您使用https有什么特别的原因吗？这是Google在他们的示例中列出的脚本标签。

<script src="http://www.google.com/jsapi"></script>

- Philip T.

---

因为网站采用HTTPS协议，所以必须使用HTTPS。 - Darryl Hein

你的所有内容都是基于https的，还是只有部分内容是？ - Dscoduc

在https网站上使用http链接很烦人，因为IE（至少默认情况下）会弹出令人讨厌的“此网站包含安全和非安全内容”的确认框。 - cletus

代码来源的站点完全采用SSL协议——极其安全的联系信息。 - Darryl Hein

如果您关心用户的安全，一定要为JavaScript使用HTTPS。没有HTTPS，很容易在请求中间人攻击（MITM），并在您打算发送给人们的JavaScript旁边提供漏洞利用。公共WiFi、黑客入侵的家庭路由器等都可能成为MITM位置。看看所有那些pwn-to-own比赛：他们总是利用浏览器进入。 - Hans-Christoph Steiner

Answer 5

我不想让我开发的任何公共网站依赖于任何外部网站，因此，我会自己托管jQuery。

如果其他网站（如Google、jquery.com等）宕机，你愿意让你的网站也出现故障吗？减少依赖是关键。

- slacy

---

我认为用户体验（快速加载时间）与较少的依赖关系同等重要。 - Dscoduc

@slacy 嘿，你的网站挂了！开玩笑的，但我确实注意到你正在使用 Google Analytics 并将其脚本放在开头而不是结尾 - 如果 Google 确实很慢，这会稍微减慢你的网站速度。 - Simon_Weaver

嗯...Slacy正在使用Google Analytics吗？他不是刚说过他不想让他开发的任何公共网站依赖外部网站吗？;-) - Dscoduc

哇，伙计们，那里有一些严厉的评论。 :) 是的，我在我的个人博客上使用分析工具，但那不是一个产生收入的生产网站，所以我认为这真的没问题。我相信我的网站每年都会宕机很多天。记住，你为个人网站和工作做的事情是不同的。 - slacy

不，我们并不是在苛刻，只是一些老派的玩笑……;-) - Dscoduc

使用本地副本还有其他好处：谷歌经常被像伊朗、中国等许多国家封锁，这意味着超过十亿人将无法访问。 - Hans-Christoph Steiner

Answer 6

优点：在Google上托管具有多种好处

• 可能更快（他们的服务器经过更多优化）
• 他们正确处理缓存-1年（我们很难获得许可，以便在我们的服务器上进行更改，以获取正确的头信息）
• 已经在其他域中链接到Google托管版本的用户已经在他们的缓存中拥有该文件

缺点：

• 某些浏览器可能将其视为XSS跨域并禁止该文件。
• 特别是运行Firefox的NoScript插件的用户

我想知道是否可以从Google INCLUDE，然后检查某个全局变量的存在性，或类似的东西，如果不存在，则从您的服务器加载？

- Kristen

---

这是 Firefox 的缺点，而不是谷歌的。 - Nakilon

Answer 7

这里涉及到几个问题。首先，您指定的异步加载方法：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

有一些问题需要解决。脚本标签在检索时（如果必要）会暂停页面加载。现在，如果它们加载缓慢，这是不好的，但 jQuery 很小。上述方法的真正问题是，由于 jquery.js 的加载是独立于许多页面的，它们将在 jQuery 加载之前完成加载和渲染，因此您所做的任何 jQuery 样式都将成为用户的 可见变化。

另一种方法是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

尝试一些简单的示例，比如创建一个简单的表格并使用setOnLoadCallback()方法将单元格的背景更改为黄色，与使用静态jquery.min.js加载的$(document).ready()。第二种方法不会出现明显的闪烁。而第一种方法则会。我个人认为这不是一个好的用户体验。

例如，运行以下内容：

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

你会看到表格出现，然后行变黄。

Google.load()方法的第二个问题是它只托管了有限的文件范围。这对于jQuery来说是一个问题，因为它非常依赖插件。如果您尝试使用<script src="...">标签和google.load()包含jquery插件，那么插件可能会失败并显示“jQuery未定义”的消息，因为它还没有加载。我真的看不出有什么解决办法。

第三个问题（任何一种方法都存在）是它们只有一个外部加载。假设您有一些插件和自己的JavaScript代码，您至少需要两个外部请求来加载JavaScript。最好将jQuery、所有相关插件和您自己的代码放入一个压缩文件中。

引用自应该使用Google的Ajax库API进行托管吗？：

关于加载时间，实际上您正在加载两个脚本——jsapi脚本和mootools脚本（来自上面的压缩版本）。因此，这是两个连接，而不是一个连接。根据我的经验，即使它来自Google，而且我的压缩文件版本比Google的大几K，加载时间实际上比从我的个人共享服务器加载要慢2-3倍。这是在文件加载并（可能）缓存之后。所以对我来说，由于带宽并不重要，这并不重要。

最后，您可能会遇到一个潜在问题：一个多疑的浏览器将请求标记为某种XSS尝试。默认设置通常不会出现问题，但在企业网络中，用户可能无法控制他们使用哪个浏览器，更别提安全设置了。

因此，最终我真的看不出我会在jQuery中使用Google AJAX API（在某些方面，更“完整”的API则是另一回事），除了在这里发布示例。

- cletus

---

我并没有遇到你提到的任何问题。只要以正确的顺序加载内容，我认为几乎可以解决所有问题。 - Darryl Hein

Answer 8

除了那些建议将其托管在自己的服务器上的人之外，我建议将其保留在单独的域名下（例如 static.website.com），以允许浏览器将其加载到与其他内容线程分开的位置。这个技巧对于所有静态内容，比如图片和 CSS，同样适用。

- Sergii Galashyn

Answer 9

我必须对托管在Google上的库投反对票。他们使用围绕这些库的包装器收集数据，类似于Google Analytics。至少，我不希望客户端浏览器做比我要求它做的更多的事情，更不用说页面上的其他任何东西了。在更糟的情况下，这是谷歌“不作恶”的“新版本”——使用不显眼的JavaScript来收集更多的使用数据。

注意：如果他们改变了这种做法，那太好了。但是上次我考虑使用他们托管的库时，我监视了我的网站上行的http流量，定期呼叫谷歌服务器并不是我所期望看到的。

- jro

---

但是你的网站上已经运行了Google Analytics吗？既然我已经在运行它，我想无论JQuery是否来自Google，这都不会有太大的区别，他们可能已经知道我正在使用它在我的网站上... - Dscoduc

但它被缓存了1年 - 在此期间我们是否向Google发送了304“文件已更改”的信息？ - Kristen

是的，我也看到了那些定期向谷歌发出请求的情况（Safari 的活动管理器有一个很好的列表）。 - Darryl Hein

Dscoduc - 是的，使用分析工具。至少在那种实现方式中，我提前知道我正在放弃使用数据。但JS库并非如此。 - jro

Answer 10

我会把这作为本地托管这些文件的原因。最近，南加州的一台TWC节点无法解析ajax.googleapis.com域名（仅适用于IPv4用户），因此我们无法获取外部文件。直到昨天这一点还是间歇性的问题（现在它是持续性的）。由于它是间歇性的，我在解决SaaS用户问题时遇到了大量问题。花费无数小时尝试追踪为什么一些用户使用软件没有问题，而其他用户却失败了。在我的通常调试过程中，我不习惯询问用户是否关闭了IPv6。我发现了这个问题，因为我自己也在使用这个特定的“路线”到文件，并且只使用IPV4。开发人员工具告诉我jquery没有加载，然后开始跟踪路由等等...找到真正的问题。因此，在此之后，我很可能永远不会回到外部托管的文件，因为：Google并不需要因为这个问题而崩溃，任何这些节点都可能被DNS劫持攻击并提供恶意JavaScript而不是实际文件。以前总认为使用Google域名是安全的，现在知道用户和主机之间的任何节点都可能是故障点。

- basedrop