Question

在典型的网页上，我从CDN加载以下内容：

的jQuery
角
Bootstrap
Icomoon
一些Angular插件

从1个CDN（如果可能）或从不同的CDN加载这些是否更好？对此有最好的做法，还是没有什么区别？

Answer 1

就使用一个或多个CDN而言，根据您从同一主机名下载的组件数量不会出现问题，根据此article from Yahoo UI Team，HTTP / 1.1建议浏览器应限制并行下载到每个主机名两个。因此，使用多个CDN源，不同的主机名应该是一种很好的做法。

也许在使用相关组件的情况下，为了避免意外版本不匹配（例如角度和角度路由器），您可能希望使用相同的CDN，但是，如果每个主机名的下载增加，则会以相同的方式创建加载泄漏（至少对于遵循规范建议的浏览器而言）。

使用CDN绝对是提高网站加载性能的好方法。但是，您应该考虑使用您可以找到的更流行的CDN，这将增加您从使用相同文件的其他站点获取正在使用的文件的缓存版本的机会，这将增加更多的加载性能。网站。

正如@JeffPuckett在评论中指出的那样，今天的浏览器每个服务器/代理的同时下载限制更高：
Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6
参考：https://stackoverflow.com/a/985704/4488121

Answer 2

我担心这个问题没有银弹回答，因为它经常发生。这是我的2美分。我反对专注于同时连接和浏览器/标准的数量，我想从不同的角度来看待它。

对您的用户和服务器而言最重要的是页面加载时间和服务可用性。最快的加载时间是来自缓存的加载。您的用户使用特定CDN 中的特定文件越多，缓存命中的可能性就越大。

基于这个目标，

是有意义的

从流行的CDN加载流行的库，这取决于库列表可以是相同的CDN或不同的CDN。我认为，浏览器的并行HTTP连接数是次要的参数。
加入并最小化自定义脚本，很少使用第三方库到有意义的文件（例如单个CSS和单个JS），并从您自己的主机或自己的CDN加载（如果您有大量用户来自不同的位置）甚至大陆CDN可能不适合你。）
如果由于某种原因未从CDN加载基于CDN的脚本，则回退到本地副本。
如果您有此选项，请选择最常用的库版本，这很可能不是最新版本。

我会将您可以找到CDN和使用情况统计数据的图书馆分类为受欢迎，其他人 - 不是很多，尽管您可以根据其他recommendations自行决定在本地托管什么。

对于统计数据，您可能希望使用类似w3techs的内容：

根据对您的网站受众的一些有根据的猜测，可以在“少量高流量”和“多个低流量”网站之间进行选择，但如果您想确定，则可以尝试测量缓存命中率。这不是直截了当的，但在这里我们有些idea。

现在，对于版本，您是否可以选择更改版本。如果您决定使用第一个选项“少数高流量”网站，那么绝对值得检查他们使用的CDN中的哪个版本的库。否则，对于“许多低流量”选项，最流行的版本更可取。同样的w3tech应该有statistics。

这可能听起来很麻烦，但它很少（如果不是一次）完成，因为统计数据往往变化很慢。

Answer 3

您应避免在单页中直接使用多个CDN链接，因为它会影响性能。您可以尝试以下代码添加多个CDN链接

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/jquery",
@"//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js"
).Include(
"~/Scripts/jquery-{version}.js"));

它将多个文件合并为一个文件，减少了检索和显示网页所需的服务器请求数。

Answer 4

使用CDN是其他人已经回答的方法 - 但添加更多CDN只会扩展到每个CDN的DNS查找时间可能开始占据总下载时间的程度。

因此尝试加载至少2到6个资源来尝试最大化每个CDN可能是最好的权衡。

Answer 5

公认的答案已经过时，雅虎（Yahoo）的参考文档于2007年发布，并且与HTTP / 1.1特别相关。查看HTTP / 2的正确信息：Does the per-host connection limit is raised with HTTP/2?

我要说完全相反。如果它支持HTTP / 2，最好从同一主机（在这种情况下为CDN）中加载越来越多的资源。浏览器对HTTP / 2的支持为pretty high，并且在未来几年（如果与HTTP / 3结合使用）将达到接近100％。

此外，使用更多的CDN加载文件也会带来成本：

多个DNS查找。
每个页面加载有多个连接。
不适用于移动设备。

现在，回答您的特定问题：

从1个CDN或其他CDN中加载它们更好吗？ 由于这些天的所有CDN默认情况下都支持HTTP / 2，因此建议尽可能使用一个CDN来存储越来越多的内容。顺便说一下，有一个CDN PageCDN，这是built just to solve这个偶然的域分片问题。它们在单个主机上提供javascript libraries，Fonts和专用CDN，以充分利用单个HTTP / 2连接。

是否有最佳做法？ 最佳做法是： 1.减少DNS查找。 2.减少连接。优先选择更少的CDN /主机，而不是更多的CDN /主机。 3. DO NOT BUNDLE FILES。许多开发人员会建议您捆绑文件，但是Google Chrome V8团队不建议您这样做。 4.使用preconnect元标记保存连接时间。

这不会有所作为吗？ 是的，使用CDN会有所不同，因为它可以使用其他网站的浏览器缓存来满足您的目的，从而使您甚至首次访问者都可以非常快速地加载页面。

Answer 6

现在开始询问大多数浏览器支持HTTP2的一个好问题是：我的CDN是否支持HTTP2？如果是这样的话，很可能通过1个CDN对这些请求进行流水线操作会更快。如果其他CDN尚未缓存，它还可以保存DNS查找。如果CDN支持推送它也可以提高速度，因为很多这些库需要多个文件。

Answer 7

最佳做法是同时使用CDN和后备（本地文件）。要回答您的问题，您应该使用多个CDN路径，就好像一个CDN已关闭，至少其余CDN已启动并正常工作。对于下行CDN，后备将进行锻炼。

简而言之，这就是我在项目中遵循的最佳实践。

Answer 8

您可以轻松使用cdn获取数据

Answer 9

您应该尽量避免使用CDN： -

如果CDN由于某种原因而完成，它也会影响您的应用，并且您可能还会遇到生产代码中永远不会发生的停机时间
对于CDN，浏览器需要抓取不同的域，然后下载需要更多时间的必要文件
对不同域名的请求也会减慢您的应用加载时间

浏览器一次限制为6个请求，因此如果您一次发出多个请求，它们将在队列中并且将花费更多时间，因此请尽量减少请求数。

从一个CDN或多个CDNS加载文件

9 个答案: