有一些方法来包括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>

Edit2:下面是我如何在过去的一年里没有任何问题地包含jQuery的:

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

区别在于去掉了http:。通过删除这个,您就不需要担心在http和https之间切换了。


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>

更新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库的最新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插件的用户

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


如果我负责“活动”网站,我最好知道正在发生的一切 进入我的网站。出于这个原因,我自己托管了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来说是一个问题,因为它非常依赖插件。如果你试图包含一个jquery插件与<script src="…">标签和google.load()插件可能会失败的消息"jQuery is not defined",因为它还没有加载。我真不知道还有什么办法。

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

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

As to load times, you're actually loading two scripts - the jsapi script and the mootools script (the compressed version from above). So that is two connections, rather than one. In my experience, I found that the load time was actually 2-3 times slower than loading from my own personal shared server, even though it was coming from Google, and my version of the compressed file was a couple of K larger than Google's. This, even after the file had loaded and (presumably) cached. So for me, since the bandwidth doesn't matter much, isn't going to matter.

最后还有一个潜在的问题,即偏执的浏览器将请求标记为某种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。 微软最近为通过他们的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/

希望可以帮助您选择。


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

Recently a node in Southern California on TWC has not been able to resolve the ajax.googleapis.com domain (for users with IPv4) only so we are not getting the external files. This has been intermittant up until yesterday (now it is persistant.) Because it was intermittant, I was having tons of problems troubleshooting SaaS user issues. Spent countless hours trying to track why some users were having no issues with the software, and others were tanking. In my usual debugging process I'm not in the habit of asking a user if they have IPv6 turned off.

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

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


I host it with my other js files on my own server, and, that's that point, combine and minify them (with django-compresser, here, but that's not the point) to be served as just one js file, with everything the site needs put into it. You'll need to serve your own js files anyway, so I see no reason to not add the extra jquery bytes there too - some more kbs are much more cheaper to transfer, than more requests to be made. You are not dependent to anyone, and as soon as your minified js is cached, you're super fast as well.

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

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