本地托管jQuery的好处与不足之处

88

我们目前从谷歌CDN获取jQuery和jQueryUI(以及jQueryUI CSS)库。我喜欢这样做是因为可以调用google.load("jquery", "1");,这将使用最新的jQuery 1.x.x版本。

现在由于安全原因,我打算本地获取这些库。

我很高兴本地获取它们,但我想知道还有哪些其他好处和需要注意的问题?


6
我们正在谈论哪些安全问题? - Ascherer
我没有问。我猜想这不是关于安全性的问题,而是试图通过防火墙控制 Gmail 等的带宽。 - orolo
9个回答

150

我经常使用来自Google的CDN(内容分发网络)。但以防万一,如果它离线:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>

获取Google CDN的jQuery并在必要时返回本地文件

编辑: 如果您不需要支持IE6,并且您的网站部分使用https,也可以删除http:

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

4
感谢社区:https://dev59.com/mXNA5IYBdhLWcg3wUL_n最佳方式使用谷歌托管的jQuery库,但在谷歌无法访问时使用我的托管库。 - oucil
28
现在XVIDEOS正在使用这个解决方案 :P - George Chalhoub
我一定是漏掉了什么...这种方法难道不是假设CDN加载的jQuery会在下一行(!window.jQuery...)被解释之前加载和解释吗?<script>标签是异步处理的,对吧? - rinogo
3
<script>标签是同步处理的!在第二行代码中,jQuery必须已被加载,但以防万一没有加载,我们会注入一些JS来本地加载它。如果jQuery已经存在,document.write将永远不会被执行。 - Xaver
避免使用document.write():https://csswizardry.com/2023/01/why-not-document-write/ - Stefano

114
将文件存储在CDN上的主要好处是,可以与从您自己的网站下载的文件并行下载,这样可以减少每个页面的延迟。因此,本地托管的一个缺点是增加的延迟。其主要原因是浏览器在同时连接到同一Web域时所能建立的连接数量受限。在IE6中,默认为对同一域的2个并发连接 -在IE的所有打开的窗口之间共享!!在IE8+中有所改进,默认为6,这与FF / Chrome相同,但如果您有大量图像并且没有使用精灵,则会遇到严重的延迟问题。
使用CDN时,我始终明确设置库版本,而不是获取最新版本。这减少了新版本破坏您代码的风险。虽然jQuery的可能性不太大,但仍有可能出现。
使用CDN的另一个主要优点是减少站点的流量。如果您按GB付费或者使用资源受限的虚拟服务器,当您将一些内容转移到公共CDN时,您可能会发现整体站点性能提高,托管成本降低。
请确保还阅读了@Xaver对这个问题的其他回答。这是一个非常好的技巧。

5
明确设置库的版本号还有一个好处是,谷歌会给它更长的缓存时间。比如说,明确指定版本号为1.9.1将比仅请求1.9的缓存寿命更长(因为可能会发布新的jQuery 1.9版本,但1.9.1始终不变)。 - Barry
哦 - revaxarts?我没有看到这样的答案,无论是当前的还是已删除的。那个“非常好的技巧”是什么? - ashleedawg

26

其他人已经介绍了优点。缺点:

  • 如果你只包含来自自己服务器的内容,那么仅有一个服务器需要运行,并且未被防火墙等阻止,以使您的网站正常工作。若要从第三方拉取脚本,则现在需要运行和解除阻止两个服务器才能使您的网站正常工作。

  • 您从任何网站中拉取 <script> 都会完全控制用户在您的网站上的体验。如果 Google 恶意地感觉到某些事情,他们可以把东西放在他们的 jQuery 复本中,记录您的按键,从您所在页面窃取个人信息并将其与他们的网络跟踪数据库联系起来,让你在每个表单中发表“我爱谷歌!”评论,等等。

Google 可能实际上不会这样做,但这是一个超出您控制范围的因素,对于其他脚本托管服务肯定是一个需要担心的问题。之前曾经发生过统计脚本被恶意软件加载器攻击的事件。

在包含任何第三方脚本之前,即使只在您的网站上的一个页面上,您必须 100% 信任他们对该主机名上所有用户可访问的功能进行可见性控制(包括面向 Web 的管理员功能)。


24
谷歌不会那样做吧……我爱谷歌……他们会吗? :-p - JasCav
1
关于安全问题的观点非常出色。 - Naltroc
6
第二个问题的解决方案:(链接至英文页面)https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity - bren
1
好的观点:从未想过远程CDN脚本如何被黑客攻击并拉下到我的网站。对于像jQuery、jQueryUI、Boostrap等主要库来说可能不常见,但正如所指出的那样,较小、支持较少的库可能会成为受害者,特别是如果它们没有得到及时更新。好的观点+1。 - twknab

16

谷歌CDN:

  • 缓存,有利于性能,更多用户可能已经拥有它,并且可以并行下载
  • 如果不幸CDN崩溃了,你就完蛋了。
  • 如果新版本破坏了你现有的插件或网站,你可能会太晚知道。

本地:

  • 可以在离线情况下进行开发
  • 仍然可以获得一些性能优势,例如使用gzip压缩和文件缩小。

5
然而,你从谷歌 CDN 加载的 jQuery 是经过压缩的。使用 CDN 的另一个好处是它使你的目录结构更加清晰 :) - Ascherer
如果新版本破坏了您现有的插件或网站,您可能会太晚得知。为避免这种情况,您可以在CDN链接中指定版本。 - Adam

13

我更喜欢使用本地版本,因为我无法控制他们提供什么。

例如,我不希望我的用户受到Google Analytics或任何类似的影响,因为这在我的国家是一个法律问题。


9

好处:(特别是对于Google的CDN)

  1. 与您的文件并行下载。其他答案进一步解释了这一点。
  2. 谷歌的服务器可能能够更快地物理传递内容。
  3. 常见的库和框架可能已经存在于用户的计算机上,因为CDN的HTTP缓存在所有站点中都是通用的。
  4. 您的带宽不必用于提供大型库文件。

2
我认为现在我可能是少数派,但我要说的是,除非你真的需要,否则你不应该使用CDN。开始使用它的关键因素包括:
- 跨地理位置的用户。如果您的网站托管在美国,但有大量欧洲用户,CDN会提高加载时间。 - 大量用户和/或大量内容,因此一个主服务器已经不够了。可以考虑任何色情视频网站(或者如果您愿意,Netflix)。视频流是一个沉重的负载,使用CDN可以减轻主服务器的负载。
但是……问题在于这些点实际上并不适用于世界上90%的网站。我敢打赌,你不是Facebook,在全球范围内拥有数百万在线用户,也不是Pornhub,每秒传输数百GB。如果您的网站面向本地市/国的用户,并且一个服务器的容量足以满足您拥有的用户数量,则为什么要使用CDN呢?对于您的本地用户来说更快,对于您来说从本地主服务器获取所有内容更简单。
以上更多是关于CDN的一般性讨论,现在让我们接近jQuery或任何其他库的实际问题。
如果您希望您的网站可以在超过一年的时间里保持可访问和正常工作,那么最好将其放在本地。现在的库正在以一个您可能不想跟进的疯狂节奏进行更新。旧版本最终会被删除。此外,整个库可能会死亡(虽然这可能不适用于jQuery)。
从我最近的经验来看,我将我维护的网站上的TinyMCE从3.x.x(2012年)更新到5.x.x(2019年春季)。这个网站在这部分逻辑上已经工作了7(七!)年,没有任何维护。那时还没有“缩小”概念,CDN也不像现在这样普遍。但是即使它们很普遍-你永远不知道3-5-10年后会发生什么。通常,您希望您的网站即使在没有您维护的情况下也能保持活力,不是吗?但是如果您今天从CDN中获取jQuery,则此链接可能(并且很可能)在5年内失效。
像@Xaver建议的使用CDN并回退到本地版本的解决方案可能是一个很好的折衷办法。但是……也许只需摆脱CDN链接?;)

2
几乎从任何角度来看,使用Google的CDN都是一件好事。
性能将得到提高(尽管可能只有在您的网站非常繁忙时才会有明显改善),并且服务器要传输的数据量将减少(尽管jQuery并不是一个大文件需要下载),等等。
唯一不想使用它的原因是您不信任Google。通过使用它,您实际上为Google提供了一个额外的窗口,以了解您的网站流量概况,包括您可能不想公开的URL(例如您网站的安全区域)。
如果您对安全非常担心,那么这可能足以说服您不使用它(毕竟,自己托管文件并不会使网站变得缓慢),但通常大多数人会采取务实的观点,即Google已经知道他们网站的足够信息,添加这个不会有太大影响。

0
对我来说,这真的取决于你想要多少控制权。如果你像我一样需要在本地主机上开发工作和旅行时,将jquery文件放在本地比托管在Google或其他地方更好。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接