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

有一些方法来包括jQuery和jQuery UI，我想知道人们使用什么?

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

我最近一直在使用谷歌JSAPI，但发现它需要很长时间来设置SSL连接，甚至只是解析google.com。我一直在使用以下谷歌:

<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>

下面是我如何在去年没有任何问题的情况下包含jQuery:

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

不同之处在于http:的删除。通过删除这个，您就不需要担心在http和https之间切换了。

281025 次浏览
小开

jQuery 1.3.1 min的大小只有18k。我不认为这是一个太大的打击，要求在初始页面加载。它会在那之后被缓存。因此，我自己主持。

小开

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

编辑:对于一个主要的网络应用，当然要控制它;下载并自己提供。但对于我的个人网站，我一点也不在乎。东西不会神奇地消失，它们通常会先被弃用。我对它的了解足以让我知道在未来的版本中需要修改哪些内容。

小开

我可能在这方面比较老派，但我还是不喜欢盗链。也许谷歌是个例外，但一般来说，在您自己的服务器上托管文件确实是一种礼貌。

小开

如果您想使用谷歌，直接链接可能响应更快。每个库都列出了直接文件的路径。这是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>
小开

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

但是，考虑到您正在使用的jQuery文件可能不会经常更改，浏览器缓存会起作用，使这一点在大多数情况下变得毫无意义。

把它放在外部服务器上的第二个原因是降低到自己服务器的流量。

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

小开
最佳答案

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

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

很多人选择将JQuery托管在谷歌上，所以当访问者访问我的网站时，他们可能已经在本地缓存中有JQuery脚本。预先缓存的内容通常意味着访问者更快的加载时间。

我的网络主机公司收取我所使用的带宽。如果访问者可以在其他地方获得相同的文件，那么每次用户会话花费18k是没有意义的。

我知道我对谷歌有一定的信任，以提供正确的脚本文件，并保持在线和可用。到目前为止，我对使用谷歌并没有感到失望，并将继续这种配置，直到它不再有意义为止。

有一件事值得指出…如果你的网站上有安全页面和不安全页面的混合，你可能想动态更改谷歌源，以避免在安全页面中加载不安全内容时看到的通常警告:

这是我想到的:

<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>
< p > 更新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库的最新major版本被加载，你也可以更改url来反映jQuery的major编号:

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

最后，如果你不想使用谷歌而更喜欢jQuery，你可以使用下面的源路径(请记住jQuery不支持SSL连接):

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

除了有人建议把它放在自己的服务器上，我还建议把它放在单独的域(例如static.website.com)上，这样浏览器就可以把它加载到与其他内容线程分开的地方。这个技巧也适用于所有静态的东西，比如图像和css。

小开

我不得不为谷歌上托管的库投票-1。他们收集数据，谷歌分析风格，与他们的包装这些库。至少，我不希望客户端浏览器做比我要求它做的更多的事情，更不用说页面上的其他事情了。更糟糕的是，这是谷歌不作恶的“新版本”——使用不引人注目的javascript来收集更多的使用数据。

注意:如果他们改变了这种做法，那就太好了。但上次我考虑使用他们的托管库时，我监控了站点上的出站http流量，我没想到会周期性地调用谷歌服务器。

小开

优点:谷歌上的主机有好处

  • 可能更快(他们的服务器更优化)
  • 他们正确处理缓存- 1年(我们努力被允许在我们的服务器上进行更改以获得正确的头)
  • 已经在其他域上拥有谷歌托管版本链接的用户已经在他们的缓存中拥有该文件

缺点:

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

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

小开
如果我负责'live'网站，我最好知道正在发生的一切 on和成我的网站。出于这个原因，我自己在同一个服务器上或静态/外部服务器上托管jquery-min版本，但无论哪种方式，只有我(或我的程序/代理)可以在验证/测试每个更改

后更新库
小开

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

<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>

您应该看到表格出现，然后行变成黄色。

load()方法的第二个问题是它只托管有限范围的文件。这对于jquery来说是一个问题，因为它非常依赖插件。如果你试图包含一个带有<script src="...">标签和google.load()的jquery插件，插件可能会失败，并提示“jquery is not defined”，因为它还没有加载。我真不知道还有什么办法。

第三个问题(任何一种方法)是它们是一个外部负载。假设你有一些插件和你自己的Javascript代码，你至少有两个外部请求来加载你的Javascript。你最好获取jquery、所有相关插件和你自己的代码，然后把它们放到一个小文件中。

从你应该使用谷歌的Ajax库API托管吗?:

至于加载时间，你实际上 加载两个脚本——jsapi脚本 而mootools脚本(该 压缩版本从上面)。所以 这是两种联系，而不是 一个。根据我的经验，我发现 加载时间实际上是2-3倍 比从我自己的加载慢 个人共享服务器，尽管它 来自谷歌，我的版本 压缩文件中有几个 K大于谷歌。这一点,甚至 在文件加载之后 (大概)缓存。对我来说，自从 带宽并不重要，

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

所以在最后，我真的不能看到我使用谷歌AJAX API为jQuery至少(更“完整”的API是一个不同的故事在某些方面)除了在这里张贴例子。

小开

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

当其他站点(谷歌，jquery.com等)宕机时，您是否愿意在您的站点上停机?减少依赖是关键。

小开

负责人:

  (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>
小开
这里有一些有用的资源，希望可以帮助你选择你的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 < / p > 这里有一些关于所有技术中最流行的网络技术的统计数据。 http://trends.builtwith.com/ < / p >

希望可以帮助您选择。

小开

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

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

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

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

小开

我把它和我的其他js文件一起托管在我自己的服务器上，而且，这就是那一点，把它们合并并缩小(用django压缩器，这里，但这不是重点)，作为一个js文件，把网站需要的所有东西都放进去。无论如何，你都需要提供自己的js文件，所以我认为没有理由不添加额外的jquery字节——传输更多的kbs比发出更多的请求要便宜得多。你不依赖任何人，只要你的最小化js被缓存，你是超级快的。

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

我想知道为什么这一点几乎从未被提及，以及cdn是如何占领世界的:)


提交答案