包含脚本、使用 CDN (Google) 或将它们本地存储在网站的根目录中更快的是啥？

Posted 2023-03-06

【中文标题】包含脚本、使用 CDN (Google) 或将它们本地存储在网站的根目录中更快的是啥？

【英文标题】：What's faster for including scripts, using CDN (Google) or storing them locally in website's root?包含脚本、使用 CDN (Google) 或将它们本地存储在网站的根目录中更快的是什么？

【发布时间】：2011-02-14 07:43:10

【问题描述】：

包含脚本、使用 CDN (Google) 或将它们本地存储在网站根目录中哪个更快？

【参考方案1】：

将它们存储在本地存储/网络存储中会更快。为此我创建了一个小型库，结果非常令人信服

从 CDN 加载 jQuery：Chrome

268ms

，FireFox：

200ms

从 localStorage 加载 jQuery：Chrome

47ms

、FireFox

14ms

您可以在https://github.com/webpgr/cached-webpgr.js 查看代码，它很小，您可以在几分钟内阅读并理解所有内容。

这是一个如何使用它的完整示例。

完整的库：

function _cacheScript(c,d,e)var a=new XMLHttpRequest;a.onreadystatechange=function()4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify(content:a.responseText,version:d)):console.warn("error loading "+e));a.open("GET",e,!0);a.send()function _loadScript(c,d,e,a)var b=document.createElement("script");b.readyState?b.onreadystatechange=function()if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a():b.onload=function()_cacheScript(d,e,c);a&&a();b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)function _injectScript(c,d,e,a)var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()function requireScript(c,d,e,a)var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a);

调用库

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function()
    requireScript('examplejs', '0.0.3', 'example.js');
);

【讨论】：

我不知道你为什么要这样做，这没有多大意义。从 CDN 加载脚本意味着它会被浏览器自动缓存，因此您只需在本地存储上做同样的事情。为什么不直接使用浏览器缓存呢？

addyosmani.com/basket.js 上的“为什么选择本地存储”是一本有趣的读物。我想这可能是有道理的，因为您可以跳过服务器的“304 Not Modified”响应。

我很感激这个回复有加载时间来支持声明，我想看看是否有人有反对的说服力。人们如何反驳这些数字表明了真正的相关性？为什么这些数字与我们正在讨论的各自速度无关或独立？

【参考方案2】：

不幸的是，最近的研究表明，Google 的 CDN 实际上会影响性能。

Google 的 AJAX 库 API 尝试使用网络效应通过提供公共共享缓存来提高所有参与网站的性能。然而，最近的研究发现，很少有人使用网络来达到临界质量并实际提高网络性能。目前使用网络的开销意味着使用 Google 的 AJAX 库 API 实际上会降低性能。您应该在本地托管 JavaScript 文件。这将增加您的带宽消耗，但会提高页面加载速度。来自Zoompf.com 绩效报告说明。

参见这里Should You Use JavaScript Library CDNs?

【讨论】：

我能得到一些关于为什么这是负面的反馈吗？

这听起来不对。 Google 的 CDN 服务器比您自己托管的任何服务器都更快，更接近用户。这是另一件事 - 浏览器将从 CDN 以 parallel 的方式下载 jQuery，而 JS 来自您自己的服务器。两个请求将并行下载，但仍将按顺序执行。所以我不知道为什么这会比在你自己的服务器上托管 jQuery 慢，或者更糟的是，将它编译成一个巨大的 JS 文件。这是最坏的情况，用户没有缓存任何东西。

@ndbroadbent 使用 http2，文件也可以从您自己的域中并行加载。

【参考方案3】：

值得注意的是，Visual Studio 对 Google 的 CDN 的 Intellisense 存在问题。 Microsoft 也有一个 CDN，它允许 Intellisense 正常运行。但是，可以，使用 CDN。

【参考方案4】：

出于其他人所述的原因，我会说 Google 的 CDN。

但是，如果您的目标市场离您的服务器很近，那么从您的服务器提供服务可能会更好。

例如，假设您有一个网站为 OrlandoFloridaPeopleOnly.com/。如果您的服务器托管在佛罗里达州的奥兰多，而谷歌最近的内容交付服务器位于佛罗里达州的迈阿密和佐治亚州的亚特兰大（这是真的），如果访问者没有缓存副本，您的服务器可能 [可能] 会更快来自 Google CDN 的文件。

请记住，如果您确实从您的服务器向访问者提供静态内容，请尝试使用子域或其他方式并行下载。看在上帝的份上...不要为静态内容传输 cookie。

我不确定这个来源有多可靠：Google data centers。所以不一定要指望它。

【参考方案5】：

如果您指的是核心 jQuery 库，use the google CDN 表示面向 Internet 的站点（而不是内部站点）。

CDN 具有您难以与之竞争的以下优势：

更多服务器 带宽（您无需付费） 地理位置（响应时间较短） 冗余 优化的缓存设置 用户可能

已经

从那里缓存了文件 并行下载，用户可以同时从您的站点抓取

其他

内容

虽然您可以像他们一样配置缓存标头，但您可能无法更快地提供文件。话虽如此，图书馆/CDN 只是难题的一部分。您拥有的其他插件和代码也应该是minified, combined 和served via gzip。

【讨论】：

好点，使用可能已经有缓存的文件，之前没有想到那个:)

很棒的答案尼克，但是如果 CDN 服务的库更新并且突然破坏了布局或类似情况怎么办？这不是安全漏洞吗？

@purpler - 你可以在那里控制，例如你可以引用一个不会改变的特定版本，例如http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js，或最新的点/次版本：http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js，或最新的主要版本：http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js（确保在生产中使用jquery.min.js！）

Bingo 再次尼克，谢谢你的回答，你让我开心了 :) 还有一件事，像 html5shiv 这样的脚本有问题，它没有版本编号系统：

@purpler - 对于那些您需要从服务器中包含它们的脚本，请确保首先包含库的 CDN 链接，就像您在本地一样。 jQuery 团队正在与 Media Temple（目前托管 jQuery 站点）合作开发一个 CDN，以构建一个插件 CDN。我找不到任何好的在线参考，但如果你收听 jQuery 播客或他们的任何会议，就会提出这个问题……一旦它上线，大多数插件也应该有一个 CDN 选项。

【参考方案6】：

Google CDN :-) 1) 从缓存角度优化 2）用户从更优的CDN节点接收资源

【参考方案7】：

取决于你的服务器有多快。然而，CDN 可能更快，您的客户端可能已经从另一个网站缓存了文件。

它会从您的站点中卸载大量带宽，但是您需要依靠第 3 方的稳定性来维护文件。 （虽然我认为谷歌不会很快出现问题）