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

时间：2009-02-13 19:43:31

标签： javascript jquery ssl google-ajax-libraries

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

  • Google JSAPI
  • jQuery的网站
  • 您自己的网站/服务器
  • 另一个CDN

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

<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之间切换。

16 个答案:

答案 0 :(得分：153)

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

首先： Google api服务器遍布全球而非我的单一服务器位置：更紧密的服务器通常意味着访问者的响应时间更快。

第二：许多人选择在Google上托管JQuery，因此当访问者访问我的网站时，他们可能已经在其本地缓存中安装了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>

答案 1 :(得分：19)

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

但是，鉴于您使用的jQuery文件可能不会经常更改，浏览器缓存将启动并使大部分内容都没有用。

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

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

答案 2 :(得分：14)

jQuery 1.3.1分钟只有18k的大小。我不认为在初始页面加载时要求太多。之后它会被缓存。结果，我自己主持。

答案 3 :(得分：14)

如果您想使用Google，直接链接可能会更具响应性。每个库都具有为直接文件列出的路径。这是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>
<script>

答案 4 :(得分：8)

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

当其他（Google，jquery.com等）发生故障时，您是否愿意在您的网站上停电？较少的依赖关系是关键。

答案 5 :(得分：6)

优点：Google上的主机有好处

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

缺点：

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

我想知道你是否可以从谷歌中包括，然后检查一些全局变量的存在，或者某些，如果你的服务器没有加载？

答案 6 :(得分：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（）方法将单元格的背景更改为黄色，并使用静态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大于谷歌。这甚至   文件加载后   （大概）缓存了。所以对我来说，从那以后   带宽并不重要，   不重要。

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

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

答案 7 :(得分：4)

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

答案 8 :(得分：4)

我必须为在Google上托管的图书馆投票-1。他们正在收集数据，谷歌分析风格，以及围绕这些库的包装。至少，我不希望客户端浏览器做的比我要求它做的更多，更不用说页面上的任何其他东西了。更糟糕的是，这是谷歌的“新版本”，不是邪恶的 - 使用不引人注目的JavaScript来收集更多的使用数据。

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

答案 9 :(得分：3)

关于这个问题，我可能是老派，但我仍然不喜欢热链接。也许谷歌是个例外，但总的来说，在你自己的服务器上托管文件真的很有礼貌。

答案 10 :(得分：3)

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

最近，南加州TWC上的一个节点无法解析ajax.googleapis.com域（仅限IPv4用户），因此我们无法获取外部文件。直到昨天（现在它仍然存在）这已经是间歇性的。由于它是间歇性的，我在解决SaaS用户问题时遇到了大量问题。花了无数个小时试图跟踪为什么有些用户没有使用该软件的问题，而其他用户正在坦承。在我通常的调试过程中，我不习惯询问用户是否关闭了IPv6。

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

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

答案 11 :(得分：2)

我只是包含jQuery网站的最新版本：http://code.jquery.com/jquery-latest.pack.js它符合我的需求，我从不担心更新。

编辑：对于一个主要的网络应用程序，当然控制它;下载并自己提供。但对于我的个人网站，我不在乎。事情并没有神奇地消失，它们通常会被弃用。我及时了解它，以便了解未来发布的内容。

答案 12 :(得分：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/

希望可以帮助您选择。

答案 13 :(得分：1)

如果我对“现场”网站负责，我最好知道一切正在发生的事情 在进入我的网站。出于这个原因，我自己在相同的服务器或静态/外部服务器上托管jquery-min版本，但无论是哪种方式，只有我（或我的程序/代理）在验证/测试每次更改后才能更新库

答案 14 :(得分：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>

答案 15 :(得分：0)

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

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

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

相关问题
最新问题