从一个 CDN 或多个 CDNS 加载文件
Load files from one CDN or multiple CDNS
在一个典型的网页上，我加载了以下内容，全部来自 CDN：
- jQuery
- Angular
- Bootstrap
- Icomoon
- 几个 Angular 插件
从 1 个 CDN（如果可能）或从不同的 CDN 加载它们更好吗？是否有这方面的最佳实践，或者它没有什么不同？
根据article from Yahoo UI Team、HTTP/1.1，就使用一个或多个 CDN 而言，这不是问题，具体取决于您从同一主机名下载的组件数量。建议浏览器应将每个主机名的并行下载限制为两个。因此，使用多个 CDN 源，不同的主机名应该是一个很好的做法。
也许在使用相关组件只是为了避免意外版本不匹配的情况下，例如 angular 和 angular-router，您可能希望使用相同的 CDN，但是，如果每个下载主机名增加会以同样的方式造成加载泄漏（至少对于遵循规范建议的浏览器而言）。
使用 CDN 绝对是提高网站加载性能的好方法。但是，你应该考虑使用你能找到的更流行的 CDN，这会增加你从使用相同文件的不同站点获得你正在使用的文件的缓存版本的机会，这会进一步提高加载性能网站。
As @JeffPuckett pointed out in the comments, browsers have a higher limit of simultaneous download per server/proxy today's days:
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
Ref.:
您应该尽量避免使用 CDN 作为：-
- 如果 CDN 由于某种原因完成，它也会影响您的应用程序，您还可能面临停机时间，这在生产代码中永远不会发生
- 对于CDN，浏览器需要抓取不同的域，然后下载必要的文件，这将花费更多时间
- 不同域的请求数量也会减慢您的应用加载时间
浏览器有一次最多6个请求的限制，所以如果你一次发出很多请求，它们会排在队列中，会花费更多的时间，所以尽量减少请求的数量。
推荐 -
您的应用程序中的用户 Bower/Grunt or Webpack -
- Bower 会将您的应用程序的所有依赖项都带到您的本地 server/machine，这样它就不需要搜索不同的域来获取所需的文件
- Grunt 会将所有不同的文件连接并合并到一个文件中，因此它的大小会减小，浏览器发出的下载文件请求也会减少。
如果您对bower/grunt有任何疑问，我可以帮助您。
您可以轻松使用 cdn 来获取数据
你应该避免在单个页面中直接使用多个 CDN 链接，因为它会影响 performance.You 可以尝试下面的代码来添加多个 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"));
它将多个文件组合成一个文件，减少了检索和显示网页所需的服务器请求数。
既然大多数浏览器都支持 HTTP2，那么开始问的一个好问题是：我的 CDN 是否支持 HTTP2？如果是这样，通过 1 个 CDN 流水线处理这些请求可能会更快。如果其他 CDN 尚未缓存，它还可以保存 DNS 查找。如果 CDN 支持推送，它还可以提高速度，因为很多这些库需要多个文件。
恐怕这个问题没有灵丹妙药，因为它通常会发生。这是我的 2 美分。与关注同时连接的数量和 browsers/standards 相反，我想从不同的角度来看待它。
对于您的用户和您的服务器而言，最重要的是页面加载时间和服务可用性。最快的加载时间是从缓存加载。 您的 用户使用来自特定 CDN 的特定文件 的次数越多，缓存命中的机会就越大.
基于这个目标，
- 从流行的 CDN 加载流行的库，这取决于库列表可以是相同的 CDN 或不同的 CDN。我认为，浏览器的并行 HTTP 连接数是次要参数。
- 将自定义脚本和很少使用的第 3 方库加入并最小化到尽可能少的文件中（例如单个 CSS 和单个 JS）并从您自己的主机或自己的 CDN 加载（如果您有大量来自不同位置甚至大陆的用户数量 CDN 对您来说可能并不奢侈）。
- 如果出于任何原因未从 CDN 加载基于 CDN 的脚本，则回退到本地副本。
- 如果你有那个选项，select 最常用的库版本，很可能不是最新的。
我会将图书馆分类，您可以找到流行的 CDN 和使用统计数据，其他的 - 不是那么多，尽管您可以根据其他 recommendations 自己决定在本地托管什么。
对于统计，您可能需要使用类似 w3techs 的工具：
可以根据对网站受众的一些有根据的猜测在 "few high traffic" 和 "many low traffic" 网站之间进行选择，但如果您想确定，可以尝试测量缓存命中率。这并不简单，但这里有一些 idea.
现在，对于版本，您是否可以选择更改版本。如果您决定使用第一个选项 "few high traffic" 站点，那么从他们使用的 CDN 中检查哪个版本的库绝对值得。否则，对于 "many low traffic" 选项，最好使用最流行的版本。同样的 w3tech 应该有 statistics.
这听起来可能很麻烦，但很少有人这样做（如果不是一次的话），因为统计数据的变化往往非常缓慢。
最佳做法是同时使用 CDN 和回退（本地文件）。要回答您的问题，您应该使用多个 CDN 路径，就好像一个 CDN 出现故障一样，至少其余的 CDN 都在运行。对于下行 CDN，回退将得到解决。
简而言之，这两个是我在项目中遵循的最佳实践。
正如其他人已经回答的那样，使用 CDN 是可行的方法 - 但添加更多 CDN 只会扩大到每个 CDN 的 DNS 查找时间可能开始支配总下载时间的程度。
因此，通过尝试加载至少 2 - 6 个资源来最大化每个 CDN 可能是最好的权衡。
已接受的答案已过时，雅虎的参考文档于 2007 年发布，与 HTTP/1.1 特别相关。查看 HTTP/2 的正确信息：
我会说恰恰相反。最好从同一主机加载越来越多的资源，在本例中为 CDN，如果它支持 HTTP/2。浏览器对 HTTP/2 的支持是 pretty high，几年后将接近 100%（如果结合 HTTP/3）。
此外，使用更多 CDN 加载文件也会产生相关成本：
- 多次 DNS 查找。
- 每次页面加载多个连接。
- 不适合移动设备。
现在，回答您的具体问题：
从 1 个 CDN 或不同的 CDN 加载这些更好吗？
由于现在所有的 CDN 默认都支持 HTTP/2，所以建议尽可能使用一个 CDN 来获取越来越多的内容。顺便说一句，有一个 CDN，PageCDN，它是 built just to solve this Incidental Domain Sharding issue. They provide javascript libraries, Fonts 和单个主机上的私有 CDN，以充分利用单个 HTTP/2 连接。
有这方面的最佳实践吗？
最佳做法是：
1. 减少 DNS 查询。
2.减少连接。更喜欢少 CDNs/Hosts 而不是多 CDNs/Hosts。
3. DO NOT BUNDLE FILES。许多开发人员会建议您捆绑文件，但 Google Chrome V8 团队不建议这样做。
4.使用preconnect meta标签来节省连接时间。
没有区别吗？
是的，使用 CDN 会有所不同，因为它可以为您的目的使用其他网站的浏览器缓存，这样即使您的第一次访问者也可以获得非常快的页面加载。
在一个典型的网页上，我加载了以下内容，全部来自 CDN：
- jQuery
- Angular
- Bootstrap
- Icomoon
- 几个 Angular 插件
从 1 个 CDN（如果可能）或从不同的 CDN 加载它们更好吗？是否有这方面的最佳实践，或者它没有什么不同？
根据article from Yahoo UI Team、HTTP/1.1，就使用一个或多个 CDN 而言，这不是问题，具体取决于您从同一主机名下载的组件数量。建议浏览器应将每个主机名的并行下载限制为两个。因此，使用多个 CDN 源，不同的主机名应该是一个很好的做法。
也许在使用相关组件只是为了避免意外版本不匹配的情况下，例如 angular 和 angular-router，您可能希望使用相同的 CDN，但是，如果每个下载主机名增加会以同样的方式造成加载泄漏（至少对于遵循规范建议的浏览器而言）。
使用 CDN 绝对是提高网站加载性能的好方法。但是，你应该考虑使用你能找到的更流行的 CDN，这会增加你从使用相同文件的不同站点获得你正在使用的文件的缓存版本的机会，这会进一步提高加载性能网站。
As @JeffPuckett pointed out in the comments, browsers have a higher limit of simultaneous download per server/proxy today's days:
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: 6Ref.:
您应该尽量避免使用 CDN 作为：-
- 如果 CDN 由于某种原因完成，它也会影响您的应用程序，您还可能面临停机时间，这在生产代码中永远不会发生
- 对于CDN，浏览器需要抓取不同的域，然后下载必要的文件，这将花费更多时间
- 不同域的请求数量也会减慢您的应用加载时间
浏览器有一次最多6个请求的限制，所以如果你一次发出很多请求，它们会排在队列中，会花费更多的时间，所以尽量减少请求的数量。
推荐 -
您的应用程序中的用户 Bower/Grunt or Webpack -
- Bower 会将您的应用程序的所有依赖项都带到您的本地 server/machine，这样它就不需要搜索不同的域来获取所需的文件
- Grunt 会将所有不同的文件连接并合并到一个文件中，因此它的大小会减小，浏览器发出的下载文件请求也会减少。
如果您对bower/grunt有任何疑问，我可以帮助您。
您可以轻松使用 cdn 来获取数据
你应该避免在单个页面中直接使用多个 CDN 链接，因为它会影响 performance.You 可以尝试下面的代码来添加多个 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"));
它将多个文件组合成一个文件，减少了检索和显示网页所需的服务器请求数。
既然大多数浏览器都支持 HTTP2，那么开始问的一个好问题是：我的 CDN 是否支持 HTTP2？如果是这样，通过 1 个 CDN 流水线处理这些请求可能会更快。如果其他 CDN 尚未缓存，它还可以保存 DNS 查找。如果 CDN 支持推送，它还可以提高速度，因为很多这些库需要多个文件。
恐怕这个问题没有灵丹妙药，因为它通常会发生。这是我的 2 美分。与关注同时连接的数量和 browsers/standards 相反，我想从不同的角度来看待它。
对于您的用户和您的服务器而言，最重要的是页面加载时间和服务可用性。最快的加载时间是从缓存加载。 您的 用户使用来自特定 CDN 的特定文件 的次数越多，缓存命中的机会就越大.
基于这个目标，
- 从流行的 CDN 加载流行的库，这取决于库列表可以是相同的 CDN 或不同的 CDN。我认为，浏览器的并行 HTTP 连接数是次要参数。
- 将自定义脚本和很少使用的第 3 方库加入并最小化到尽可能少的文件中（例如单个 CSS 和单个 JS）并从您自己的主机或自己的 CDN 加载（如果您有大量来自不同位置甚至大陆的用户数量 CDN 对您来说可能并不奢侈）。
- 如果出于任何原因未从 CDN 加载基于 CDN 的脚本，则回退到本地副本。
- 如果你有那个选项，select 最常用的库版本，很可能不是最新的。
我会将图书馆分类，您可以找到流行的 CDN 和使用统计数据，其他的 - 不是那么多，尽管您可以根据其他 recommendations 自己决定在本地托管什么。
对于统计，您可能需要使用类似 w3techs 的工具：
可以根据对网站受众的一些有根据的猜测在 "few high traffic" 和 "many low traffic" 网站之间进行选择，但如果您想确定，可以尝试测量缓存命中率。这并不简单，但这里有一些 idea.
现在，对于版本，您是否可以选择更改版本。如果您决定使用第一个选项 "few high traffic" 站点，那么从他们使用的 CDN 中检查哪个版本的库绝对值得。否则，对于 "many low traffic" 选项，最好使用最流行的版本。同样的 w3tech 应该有 statistics.
这听起来可能很麻烦，但很少有人这样做（如果不是一次的话），因为统计数据的变化往往非常缓慢。
最佳做法是同时使用 CDN 和回退（本地文件）。要回答您的问题，您应该使用多个 CDN 路径，就好像一个 CDN 出现故障一样，至少其余的 CDN 都在运行。对于下行 CDN，回退将得到解决。
简而言之，这两个是我在项目中遵循的最佳实践。
正如其他人已经回答的那样，使用 CDN 是可行的方法 - 但添加更多 CDN 只会扩大到每个 CDN 的 DNS 查找时间可能开始支配总下载时间的程度。
因此，通过尝试加载至少 2 - 6 个资源来最大化每个 CDN 可能是最好的权衡。
已接受的答案已过时，雅虎的参考文档于 2007 年发布，与 HTTP/1.1 特别相关。查看 HTTP/2 的正确信息：
我会说恰恰相反。最好从同一主机加载越来越多的资源，在本例中为 CDN，如果它支持 HTTP/2。浏览器对 HTTP/2 的支持是 pretty high，几年后将接近 100%（如果结合 HTTP/3）。
此外，使用更多 CDN 加载文件也会产生相关成本：
- 多次 DNS 查找。
- 每次页面加载多个连接。
- 不适合移动设备。
现在，回答您的具体问题：
从 1 个 CDN 或不同的 CDN 加载这些更好吗？ 由于现在所有的 CDN 默认都支持 HTTP/2，所以建议尽可能使用一个 CDN 来获取越来越多的内容。顺便说一句，有一个 CDN，PageCDN，它是 built just to solve this Incidental Domain Sharding issue. They provide javascript libraries, Fonts 和单个主机上的私有 CDN，以充分利用单个 HTTP/2 连接。
有这方面的最佳实践吗？ 最佳做法是： 1. 减少 DNS 查询。 2.减少连接。更喜欢少 CDNs/Hosts 而不是多 CDNs/Hosts。 3. DO NOT BUNDLE FILES。许多开发人员会建议您捆绑文件，但 Google Chrome V8 团队不建议这样做。 4.使用preconnect meta标签来节省连接时间。
没有区别吗？ 是的，使用 CDN 会有所不同，因为它可以为您的目的使用其他网站的浏览器缓存，这样即使您的第一次访问者也可以获得非常快的页面加载。