你从哪里包含 jQuery 库？谷歌 JSAPI？ CDN？

Posted 2023-03-07

【中文标题】你从哪里包含 jQuery 库？谷歌 JSAPI？ CDN？

【英文标题】：Where do you include the jQuery library from? Google JSAPI? CDN?

【发布时间】：2010-10-07 12:54:26

【问题描述】：

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

谷歌 JSAPI jQuery 的网站 您自己的站点/服务器 另一个 CDN

我最近一直在使用 Google JSAPI，但发现设置 SSL 连接需要很长时间，甚至只解析 google.com。我一直在为 Google 使用以下内容：

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

我喜欢使用 Google 的想法，以便在访问其他网站时缓存它并节省我们服务器的带宽，但如果它一直是网站的慢速部分，我可能会更改包含。

你用什么？你有什么问题吗？

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

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

Edit2： 以下是我去年如何毫无问题地包含 jQuery：

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

不同之处在于删除了http:。去掉这个，你就不用担心在 http 和 https 之间切换了。

【问题讨论】：

达里尔，很棒的编辑。我是否可以建议您将编辑移至页面顶部并将src 更改为您现在使用的更简单/更安全/更快的语法？您的回答基本上已成为规范，这两项更改都将帮助人们快速获得他们想要的东西。

【参考方案1】：

jQuery 1.3.1 min 的大小只有 18k。我不认为在初始页面加载时问这个问题太大了。之后会被缓存。因此，我自己主持。

【讨论】：

我非常不同意，基于您陈述的原因。如果您获得大量流量，则每个会话 18k 可以快速增加相当数量的流量。特别是如果您的网络托管按使用的带宽收费...

我的观点是，只有当您的访问者只看一页时，这才值得关注。如果您的个人资料访问者较少且页面浏览量较多，那么在每个访问者的页面浏览量中分散时开销最小。回头客也一样。

除非您的网站非常小，否则 18k 将永远只是您流量的一小部分。

【参考方案2】：

我只包含来自 jQuery 站点的最新版本：http://code.jquery.com/jquery-latest.pack.js 它适合我的需要，我永远不必担心更新。

编辑：对于一个主要的网络应用程序，当然要控制它；下载并自己提供。但对于我的个人网站，我不在乎。事物不会神奇地消失，它们通常首先被弃用。我跟上它足以知道将来版本要更改的内容。

【讨论】：

我发现这种方法有点危险，如果库中的代码更改破坏了您的网站怎么办？还是 jquery 网站宕机了？我宁愿完全控制文件。

另外，我讨厌像这样打击 jQuery 人的带宽。他们已经提供了一个非常酷的免费工具，我不希望他们因为带宽成本而下降。如果您不想自己托管它，最好使用 Google 作为您的外部资源，因为他们为此目的提供了它。

我建议切换到使用 Google 而不是 JQuery。主要原因是 Google 可能在全球拥有比 JQuery 更多的服务器，并且根据我的经验，更多的人使用 Google 托管，这增加了他们已经缓存它的机会。

我同意 Jason 的观点，自动切换到较新的版本非常危险。如果您只使用 jquery，可能不会那么多，但是对于插件，我绝对不推荐它。我在一个站点上使用了一个插件，该插件适用于 1.2.6 但不适用于 1.3.x（还...）

【参考方案3】：

我可能对此有点老派，但我仍然不赞成盗链。也许 Google 是个例外，但总的来说，将文件托管在您自己的服务器上确实是一种很好的方式。

【讨论】：

“礼貌”是什么意思？ Google 鼓励您链接到他们的服务器。它是由 Google 令人难以置信的基础架构提供的。

当您听说使用 google 时肯定会感到困惑。但正如 nosredna 所说，它是鼓励“我们消除了托管库、正确设置缓存标头、保持最新的错误修复等方面的痛苦。” - code.google.com/apis/ajaxlibs

【参考方案4】：

如果您想使用 Google，直接链接可能会更具响应性。每个库都列出了直接文件的路径。这是 jQuery 路径

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

重新阅读您的问题，您使用 https 是否有原因？这是谷歌在他们的例子中列出的脚本标签

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

【讨论】：

使用 HTTPS，因为网站是 HTTPS，所以不得不这样做。

您所有的内容都是基于 https 的，还是只有一部分？

https 网站上的 http 链接很烦人，因为 IE（至少在默认情况下）会用烦人的“此站点包含安全和不安全内容的混合”来困扰您。确认框。

代码来自的网站完全是SSL——非常安全的联系信息。

如果您非常关心用户的安全，请始终对 javascript 使用 HTTPS。如果没有 HTTPS，很容易对这些请求进行中间人 (MITM) 并在您打算发送给人们的 javascript 旁边提供漏洞利用。将公共 wifi、被黑客入侵的家庭路由器等视为可能的 MITM 位置。看看所有那些 pwn-to-own 比赛：他们总是利用浏览器进入。

【参考方案5】：

您可能希望在外部服务器上托管的一个原因是要解决浏览器对特定服务器的并发连接限制。

但是，鉴于您使用的 jQuery 文件可能不会经常更改，浏览器缓存将启动并在大多数情况下使这一点变得毫无意义。

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

但是，鉴于 jQuery 的大小，它很可能只占您流量的一小部分。您可能应该尝试优化您的实际内容。

【讨论】：

另一个原因 - 用户的缓存中已经有来自 google 的 jquery，因此他们甚至可能不需要在 第一次访问您的网站时下载它。

【参考方案6】：

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

第一：Google api 服务器分布在世界各地，而不是我的单一服务器位置：服务器越近通常意味着访问者的响应时间越快。

第二：许多人选择将 JQuery 托管在 Google 上，因此当访问者访问我的站点时，他们可能已经在本地缓存中拥有 JQuery 脚本。预缓存的内容通常意味着访问者的加载时间更快。

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

我了解我相信 Google 会提供正确的脚本文件，并且可以在线和可用。到目前为止，我对使用 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>

【讨论】：

我同意你的所有三个理由，这就是为什么我在我的生产网站上包含来自 Google 的 jquery。而不是 SSL 页面的 js 动态注入，我只是在没有指定协议的脚本标记中引用 url。似乎对我来说工作得很好。

有趣的想法...但是如果您要使用 DNS 中毒来劫持 JQuery 负载，为什么不直接劫持整个站点的请求呢？或者 Google Analytics 脚本怎么样？

我也同意一切，除了为了简化，我使用这种格式：。那我就不用担心http或https了。感谢 Aaron Wagner。

我没有看到 document.write() 正在使用什么？一个简单的<script src="..."></script> 可以放在标题中。 →@Dscoduc:← 它不会更快，它只是会把警告信息带走。如果您的站点使用安全 https 并且您从非编码内容中提取（例如 http://googleapis），那么您将收到该警告消息。如果您只使用 http 但链接到 https://googleapis 会更快一点，“安全”编码会有一点开销。因此，链接到http://googleapis 会快一些。

另外请记住，Google 将使用它来跟踪用户访问的网站。因此，如果您正在创建一个需要注意隐私的网站，那么托管几个小文件是为隐私付出的小代价。

【参考方案7】：

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

【参考方案8】：

我必须为 Google 上托管的库投票 -1。他们正在收集数据，采用谷歌分析风格，以及围绕这些库的包装器。至少，我不希望客户端浏览器做的比我要求它做的更多，更不用说页面上的其他任何事情了。更糟糕的是，这是 Google 不作恶的“新版本”——使用不显眼的 javascript 来收集更多使用数据。

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

【讨论】：

但是您是否已经在您的网站上运行 Google Analytics？由于我是，我认为 JQuery 是否来自 Google 并没有太大区别，他们可能已经知道我在我的网站上运行它...

但它已缓存 1 年 - 我们是否同时向 Google 发送了 304“文件已更改”？

是的，我也看到了这些定期回电给 Google 的情况（Safari 的活动管理器有一个很好的列表）。

Dscoduc - 是的，使用分析。至少通过那个实现，我提前明白我放弃了使用数据。 JS 库并非如此。

【参考方案9】：

优点：Host on Google 有好处

可能更快（他们的服务器更加优化） 他们正确处理缓存 - 1 年（我们很难被允许进行更改以在我们的服务器上正确获取标头） 已经拥有指向另一个域上的 Google 托管版本的链接的用户已经在其缓存中拥有该文件

缺点：

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

我想知道您是否可以从 Google 包含，然后检查是否存在一些全局变量或类似的变量，以及是否从您的服务器加载？

【讨论】：

这是 Firefox 的缺点，不是 Google 的，。）

【参考方案10】：

如果我负责“实时”网站，我最好了解正在发生的一切 并进入我的网站。出于这个原因，我自己在同一台服务器或静态/外部服务器上托管 jquery-min 版本，但无论哪种方式，只有我（或我的程序/代理）可以在验证/测试每个更改后更新库的位置

【讨论】：

我希望 Google 永远不会更改文件 - 对于错误修复，他们将托管一个新文件，文件名中具有不同的版本号。还是我太天真了？他们会使用相同的文件名推出“小修复”吗？？

如果您要求提供特定版本，Google 绝不应该更改文件。

【参考方案11】：

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

<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、所有相关插件和您自己的代码并将其放入一个缩小文件中。

来自Should You Use Google's Ajax Libraries API for Hosting?：

至于加载时间，您实际上是 加载两个脚本 - jsapi 脚本 和 mootools 脚本（ 上面的压缩版本）。所以 那是两个连接，而不是 一。根据我的经验，我发现 加载时间实际上是2-3倍 比我自己加载慢 个人共享服务器，即使它 来自谷歌，我的版本 压缩文件是几个 K 比 Google 的大。这，甚至 文件加载后 （大概）缓存。所以对我来说，因为 带宽并不重要， 没关系。

最后，您可能会遇到偏执浏览器将请求标记为某种 XSS 尝试的潜在问题。这通常不是默认设置的问题，但在公司网络上，用户可能无法控制他们使用的浏览器，更不用说您可能遇到的安全设置问题。

所以最后我真的看不到我在使用 Google AJAX API for jQuery（在某些方面更“完整”的 API 是另一回事），除了在这里发布示例。

【讨论】：

我没有遇到你提到的任何问题。据我所知，只需按正确的顺序加载内容即可解决几乎所有问题。

【参考方案12】：

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

当另一个（Google、jquery.com 等）出现故障时，您是否愿意让您的网站中断？减少依赖是关键。

【讨论】：

我把用户体验（快速加载时间）放在了那里，依赖较少。

@slacy 嘿，您的网站已关闭！实际上是 jk，但我确实注意到您使用的是谷歌分析，并且他们的脚本在开头而不是结尾 - 如果 google 速度很慢，这会稍微降低您的网站速度

嗯...slacy 正在使用 Google Analytics？他不是说他不希望他开发的任何公共网站依赖于外部网站吗？ ;-)

哇，伙计们，那里有一些苛刻的 cmets。 :) 是的，我确实在我的个人博客上使用了 Analytics，但那不是产生收入的生产网站，所以我认为它真的很好。我确信我的网站每年都会关闭很多天。请记住，您为个人网站和工作所做的工作是不同的

使用本地副本还有其他充分的理由：Google 在伊朗、中国等许多国家经常被屏蔽。这意味着超过 10 亿人将无法访问。

【参考方案13】：

在头上：

  (function() 
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  )();

正文结束：

<script type="text/javascript">
google.load("jquery", "version");
</script>

【参考方案14】：

这里有一些有用的资源，希望可以帮助您选择您的 CDN。 MS 最近通过其 CDN 添加了一个用于交付库的新域。

旧格式：http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js 新格式：http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

这不应发送 microsoft.com 的所有 cookie。 http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

这里有一些关于网络上使用的最流行技术的统计数据，涵盖所有技术。 http://trends.builtwith.com/

希望能帮助你选择。

【参考方案15】：

我会将此作为在本地托管这些文件的理由。

最近，TWC 上南加州的一个节点无法解析 ajax.googleapis.com 域（适用于使用 IPv4 的用户），因此我们无法获取外部文件。直到昨天这一直是间歇性的（现在它是持续性的。）因为它是间歇性的，所以我在解决 SaaS 用户问题时遇到了很多问题。花了无数个小时试图追踪为什么一些用户对软件没有任何问题，而另一些用户却在失败。在我通常的调试过程中，我没有询问用户是否关闭 IPv6 的习惯。

我偶然发现了这个问题，因为我自己正在使用这个特定的“路由”到文件并且也只使用 IPV4。我发现开发人员工具的问题告诉我 jquery 没有加载，然后开始进行跟踪路由等......以找到真正的问题。

在此之后，我很可能永远不会再使用外部托管的文件了，因为：谷歌不必为了这成为一个问题而关闭，并且......这些节点中的任何一个都可能受到 DNS 劫持和传递恶意 js 而不是实际文件。一直认为我是安全的，因为 google 域永远不会关闭，现在我知道用户和主机之间的任何节点都可能成为故障点。

【参考方案16】：

我将它与我自己的服务器上的其他 js 文件一起托管，然后，将它们组合并缩小（使用 django-compresser，在这里，但这不是重点）作为一个 js 文件，使用该网站需要放入其中的所有内容。无论如何，您都需要提供自己的 js 文件，所以我认为没有理由不在那里添加额外的 jquery 字节 - 传输更多的 kb 比发出更多的请求要便宜得多。你不依赖任何人，一旦你的压缩 js 被缓存，你也超级快。

在第一次加载时，基于 CDN 的解决方案可能会胜出，因为您必须从您自己的服务器加载额外的 jquery 千字节（但没有额外的请求）。不过，我怀疑差异是否明显。然后，在清除缓存的第一次加载时，您自己的托管解决方案可能总是更快，因为需要更多请求（和 DNS 查找）来获取 CDN jquery。

我想知道这一点是如何几乎从未被提及的，以及 CDN 似乎如何接管世界 :)