你从哪里包含jQuery库? Google JSAPI? CDN?

有几种方法可以包括jQuery和jQuery UI,我想知道人们在使用什么?

  • Google 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的想法,以便在访问其他网站时caching,并节省我们服务器的带宽,但是如果它一直是网站的缓慢部分,我可能会更改包含。

你用什么? 你有什么问题吗?

编辑:刚刚访问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之间切换。

毫无疑问,我select了由Google API服务器提供服务的JQuery。 我没有使用jsapi方法,因为我没有使用任何其他的Google API,但是如果有变化,那么我会考虑它…

首先:谷歌api服务器分布在世界各地,而不是我单一的服务器位置:更密切的服务器通常意味着访问者的响应速度更快。

第二:许多人select在Google上托pipeJQuery,因此当访问者访问我的站点时,他们的本地caching中可能已经有了JQuery脚本。 预caching的内容通常意味着访问者的加载速度更快。

第三:我的networking托pipe公司收取我使用的带宽。 如果访问者可以在其他地方获得相同的文件,则每个用户会话没有意义消耗18k。

我知道我在Google上放置了一部分信任来提供正确的脚本文件,并且可以在线使用。 到目前为止,我还没有对使用Google感到失望,并将继续这种configuration,直到它没有意义。

有一点值得指出…如果您的站点上有混合安全和不安全页面,您可能需要dynamic更改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> 

UPDATE 9/8/2010 – 已经提出了一些build议,通过删除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,你可以使用下面的源代码path(请记住,jQuery不支持SSL连接):

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

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

但是,鉴于您正在使用的jQuery文件可能不会经常更改,浏览器caching将启动并使这一点在大多数情况下没有意义。

在外部服务器上托pipe它的第二个原因是降低到自己的服务器的stream量。

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

jQuery 1.3.1分钟只有18K的大小。 在初始页面加载时,我不认为这是一个太大的冲击。 之后会被caching。 因此,我自己主持。

如果你想使用谷歌,直接链接可能会更敏感。 每个库都有为直接文件列出的path。 这是jQuerypath

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

我不希望任何公开的网站,我开发依赖任何外部网站,因此,我会主持jQuery自己。

当另一个(Google,jquery.com等)出现故障时,您是否愿意在您的网站上发生停机? 关键依赖较less。

优点:Google上的主机有好处

  • 可能更快(他们的服务器更加优化)
  • 他们正确地处理caching – 1年(我们很难被允许进行更改,使我们的服务器上的标题正确)
  • 在另一个域上已经有Google托pipe版本的链接的用户已经在caching中拥有该文件

缺点:

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

我不知道你是否可以从Google包含INCLUDE,然后检查是否存在一些全局variables,或者某些,如果没有从你的服务器加载?

这里有几个问题。 首先,你指定的asynchronous加载方法:

 <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()方法的第二个问题是它仅托pipe有限范围的文件。 这是jQuery的问题,因为它是非常依赖插件。 如果你试图用<script src="...">标签和google.load()包含一个jquery插件,插件可能会失败,并显示“jQuery未定义”的消息,因为它尚未加载。 我真的没有看到这个方法。

第三个问题(无论采用哪种方法)都是一个外部负载。 假设你有一些插件和你自己的Javascript代码,你至less需要两个外部的请求来加载你的Javascript。 你可能最好把jquery,所有相关的插件和你自己的代码放到一个缩小的文件中。

从你应该使用谷歌的Ajax库API主机? :

至于加载时间,实际上是加载两个脚本 – jsapi脚本和mootools脚本(上面的压缩版本)。 这是两个关系,而不是一个。 根据我的经验,我发现加载时间实际上比我自己的个人共享服务器的加载速度慢2-3倍,即使它来自Google,而我的压缩文件版本比Google要大几K。 这,即使在文件已经加载和(推测)caching之后。 所以对于我来说,由于带宽并不重要,是不会有问题的。

最后,你有一个偏执的浏览器标记请求作为某种XSS尝试的潜在问题。 这通常不是默认设置的问题,而是在企业networking中,用户可能无法控制他们使用的浏览器,更不用说安全设置,您可能会遇到问题。

所以最后我真的不能真正看到我至less使用Google AJAX API(更“完整”的API在某些方面是一个不同的故事),除了在这里发布的例子。

除了build议将其托pipe在自己的服务器上的人之外,我还build议将其保留在单独的域(例如static.website.com)上,以允许浏览器将其与其他内容线程分开。 这个提示也适用于所有静态的东西,比如说图片和CSS。

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

注意:如果他们改变了这种做法,超级。 但是最后一次考虑使用托pipe库时,我监视了站点上的出站HTTPstream量,并且定期向Google服务器发出呼叫并不是我期望看到的。

我可能对此有点老派,但是我仍然不喜欢盗链。 也许Google是个例外,但一般来说,将文件托pipe在您自己的服务器上实际上只是一种很好的举止。

我将添加此作为本地主机这些文件的原因。

最近TWC南加州的一个节点只能parsingajax.googleapis.com域名(仅限IPv4用户),所以我们没有获得外部文件。 这直到昨天一直是间歇性的(现在是持续的)。因为这是间歇性的,所以我在解决SaaS用户问题时遇到了很多问题。 花了无数个小时试图跟踪为什么有些用户对软件没有任何问题,而其他用户则是坦克。 在我平时的debugging过程中,我不习惯询问用户是否closures了IPv6。

我偶然发现这个问题,因为我自己正在使用这个特定的“路由”的文件,也只使用IPV4。 我发现这个问题与开发人员的工具告诉我,jquery没有加载,然后开始做traceroutes等…find真正的问题。

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

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

编辑:对于一个主要的networking应用程序,当然控制它; 下载并自己提供。 但对于我的个人网站,我不在乎。 事情不会奇迹般地消失,他们通常先被弃用。 我跟上它足以知道未来版本要改变什么。

这里有一些有用的资源,希望可以帮助你select你的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

这里有一些关于所有技术在networking上使用的最stream行技术的统计数据。 http://trends.builtwith.com/

希望可以帮助你select。

如果我对“活”网站负责,我最好意识到正在进行的一切,并进入我的网站。 由于这个原因,我自己或者在同一台服务器上或者静态/外部服务器上托pipejquery-min版本,但是无论哪种方式,只有我(或者我的程序/代理)可以在validation/testing每一个变更之后更新库

在头上:

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