242

有几种方法可以包含 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 之间切换。

4

16 回答 16

153

毫无疑问，我选择让 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>

更新 9/8/2010 - 提出了一些建议，通过删除 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>
于 2009-02-13T20:12:30.553 回答
19

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

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

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

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

于 2009-02-13T19:58:21.803 回答
14

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

于 2009-02-13T19:47:42.437 回答
14

如果您想使用 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>
于 2009-02-13T19:57:46.393 回答
8

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

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

于 2009-02-13T23:07:43.033 回答
6

优点：Host on Google 有好处

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

缺点：

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

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

于 2009-02-13T20:36:23.210 回答
6

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

<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() 方法将单元格的背景更改为黄色，而 $(document).ready() 使用静态 jquery.min.js 加载。第二种方法不会有明显的闪烁。第一个意志。我个人认为这不是一个好的用户体验。

作为一个例子运行这个：

<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="...">标签的 jquery 插件，那么google.load()该插件可能会失败，并显示“jQuery 未定义”的消息，因为它尚未加载。我真的没有办法解决这个问题。

第三个问题（任何一种方法）是它们是一个外部负载。假设您有一些插件和您自己的 Javascript 代码，您至少需要两个外部请求来加载您的 Javascript。您最好获取 jquery、所有相关插件和您自己的代码并将其放入一个缩小文件中。

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

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

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

所以最后我真的看不到我使用谷歌 AJAX API 至少（更“完整”的 API 在某些方面是不同的故事），除了在这里发布示例。

于 2009-02-13T22:10:39.193 回答
4

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

于 2009-02-13T20:22:44.960 回答
4

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

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

于 2009-02-13T20:30:48.420 回答
3

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

于 2009-02-13T19:47:58.397 回答
3

我将添加此作为在本地托管这些文件的原因。

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

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

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

于 2015-06-26T19:44:49.230 回答
2

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

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

于 2009-02-13T19:47:45.370 回答
2

这里有一些有用的资源，希望可以帮助您选择您的 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/

希望能帮助您选择。

于 2011-03-29T11:54:56.313 回答
1

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

于 2009-02-13T21:50:59.460 回答
1

在头部：

  (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>
于 2010-02-16T12:28:39.243 回答
0

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

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

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

于 2017-11-21T15:14:27.427 回答