你在哪里包含jQuery库？谷歌JSAPI？ CDN？
[英]Where do you include the jQuery library from? Google JSAPI? CDN?
问题描述
有几种方法可以包含jQuery和jQuery UI，我想知道人们在使用什么？
- 谷歌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>
编辑2：这是我去年包括jQuery没有任何问题的方式：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
不同的是删除http: . 通过删除它，您不必担心在http和https之间切换。
16 个解决方案
解决方案1
153 已采纳 2009-02-13 20:12:30
毫无疑问，我选择让Google API服务器提供JQuery服务。 我没有使用jsapi方法，因为我没有利用任何其他Google API，但如果改变了那么我会考虑它...
第一： Google api服务器分布在世界各地而不是我的单一服务器位置：更紧密的服务器通常意味着访问者的响应时间更快。
第二：许多人选择在Google上托管JQuery，因此当访问者访问我的网站时，他们可能已在其本地缓存中安装了JQuery脚本。 预缓存内容通常意味着访问者的加载时间更短。
第三：我的网络托管公司向我收取使用的带宽费用。 如果访问者可以在其他地方获得相同的文件，则每个用户会话消耗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>
解决方案2
19 2009-02-13 19:58:21
您可能希望在外部服务器上托管的一个原因是解决与特定服务器的concurent连接的浏览器限制。
但是，鉴于您使用的jQuery文件可能不会经常更改，浏览器缓存将启动并使大多数情况下都没有用。
在外部服务器上托管它的第二个原因是降低到自己服务器的流量。
但是，考虑到jQuery的大小，它可能只是您流量的一小部分。 您应该尝试优化实际内容。
解决方案3
14 2009-02-13 19:47:42
jQuery 1.3.1分钟只有18k的大小。 我不认为在初始页面加载时要求太多。 之后它会被缓存。 结果，我自己主持。
解决方案4
14 2009-02-13 19:57:46
如果您想使用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>
解决方案5
8 2009-02-13 23:07:43
我不希望我开发的任何公共站点依赖于任何外部站点，因此，我自己托管jQuery。
当其他（Google，jquery.com等）发生故障时，您是否愿意在您的网站上停电？ 较少的依赖关系是关键。
解决方案6
6 2009-02-13 20:36:23
优点：Google上的主机有好处
- 可能更快（他们的服务器更优化）
- 他们正确处理缓存 - 1年（我们很难做出更改，以便在我们的服务器上获得正确的标题）
- 已在另一个域上拥有指向Google托管版本的链接的用户已在其缓存中包含该文件
缺点：
- 某些浏览器可能会将其视为XSS跨域并禁止该文件。
- 特别是运行Firefox NoScript插件的用户
我想知道你是否可以从谷歌包括，然后检查一些全局变量的存在，或者某些，如果你的服务器没有加载？
解决方案7
6 2009-02-13 22:10:39
这里有一些问题。 首先，您指定的异步加载方法：
<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 Libraries API进行托管吗？ ：
至于加载时间，你实际上是在加载两个脚本 - jsapi脚本和mootools脚本（上面的压缩版本）。 这是两个连接，而不是一个连接。 根据我的经验，我发现加载时间实际上比从我自己的个人共享服务器加载慢2-3倍，即使它来自谷歌，我的压缩文件版本比谷歌的K大几倍。 这甚至在文件加载和（可能）缓存之后。 所以对我来说，由于带宽并不重要，所以不重要。
最后，你有一个潜行的问题，一个偏执的浏览器将请求标记为某种XSS尝试。 这通常不是默认设置的问题，但在公司网络上，用户可能无法控制他们使用的浏览器，更不用说安全设置可能会出现问题。
所以最后我不能真正看到我至少使用Google AJAX API for jQuery（更多“完整”的API在某些方面是不同的故事），除了在这里发布示例。
解决方案8
4 2009-02-13 20:22:44
除了建议在自己的服务器上托管它的人之外，我建议将它保存在单独的域（例如static.website.com）上，以允许浏览器将其加载到与其他内容线程分开的位置。 这个提示也适用于所有静态的东西，比如图像和CSS。
解决方案9
4 2009-02-13 20:30:48
我必须为在Google上托管的图书馆投票-1。 他们正在收集数据，谷歌分析风格，以及围绕这些库的包装。 至少，我不希望客户端浏览器做的比我要求它做的更多，更不用说页面上的任何其他东西了。 更糟糕的是，这是谷歌的“新版本”，不是邪恶的 - 使用不显眼的JavaScript来收集更多的使用数据。
注意：如果他们改变了这种做法，超级。 但是我最后一次考虑使用他们的托管库时，我监控了我网站上的出站http流量，定期呼叫谷歌服务器不是我期望看到的。
解决方案10
3 2015-06-26 19:44:49
我将添加此作为本地托管这些文件的原因。
最近，南加州TWC上的一个节点无法解析ajax.googleapis.com域（仅限IPv4用户），因此我们无法获取外部文件。 直到昨天（现在它仍然存在）这已经是间歇性的。由于它是间歇性的，我在解决SaaS用户问题时遇到了大量问题。 花了无数个小时试图跟踪为什么有些用户没有使用该软件的问题，而其他用户正在坦承。 在我通常的调试过程中，我不习惯询问用户是否关闭了IPv6。
我偶然发现了这个问题，因为我自己正在使用这个特定的“路由”到文件，而且我只使用IPV4。 我发现开发人员工具的问题告诉我jquery没有加载，然后开始做traceroutes等......找到真正的问题。
在此之后，我很可能永远不会回到外部托管的文件，因为：谷歌不必为此成为一个问题，并且...这些节点中的任何一个都可能被DNS劫持和恶意js泄露而不是实际的文件。 一直以为我是安全的，谷歌域永远不会下降，现在我知道用户和主机之间的任何节点都可能是一个失败点。
解决方案11
3 2009-02-13 19:47:58
关于这个问题我可能是老派，但我仍然对皱纹感到不满。 也许谷歌是个例外，但总的来说，在你自己的服务器上托管文件真的很有礼貌。
解决方案12
2 2011-03-29 11:54:56
这里有一些有用的资源，希望可以帮助你选择你的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
2 2009-02-13 19:47:45
我只是包含jQuery站点的最新版本： http ： //code.jquery.com/jquery-latest.pack.js它符合我的需求，我从不担心更新。
编辑：对于一个主要的网络应用程序，当然控制它; 下载并自己提供。 但对于我的个人网站，我不在乎。 事情并没有神奇地消失，它们通常会被弃用。 我跟不上它，知道将来的版本要改变什么。
解决方案14
1 2010-02-16 12:28:39
在头部：
(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
1
如果我负责的“活”的地盘我更好的了解所发生的一切， 进入我的网站。 出于这个原因，我自己在相同的服务器或静态/外部服务器上托管jquery-min版本，但无论是哪种方式，只有我（或我的程序/代理）在验证/测试每个更改后才能更新库
解决方案16
0 2017-11-21 15:14:27
我在我自己的服务器上用我的其他js文件托管它，并且就是这一点，将它们组合起来（用django-compresser，这里，但这不是重点）作为一个js文件，与网站的一切需要投入其中。 无论如何你都需要提供你自己的js文件，所以我认为没有理由不在那里添加额外的jquery字节 - 一些更多的kbs比传输请求要便宜得多。 你并不依赖任何人，只要你的缩小的js被缓存，你也会超级快。
在第一次加载时，基于CDN的解决方案可能会获胜，因为您必须从您自己的服务器加载额外的jquery千字节（但是，没有额外的请求）。 不过，我怀疑这种差异是显而易见的。 然后，在第一次加载已清除缓存的情况下，您自己的托管解决方案可能会更快，因为需要更多请求（和DNS查找）来获取CDN jquery。
我想知道这一点几乎从未被提及，以及CDN似乎如何接管世界:)
Chrome扩展程序| 如何在cdn的内容和后台脚本中包含库
[英]Chrome Extension | How to include library in content and background scripts from cdn
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.