使用缓存还是CDN更好？

Question

我在学习关于浏览器加载静态文件时的性能，有一个疑问。

一些人说使用CDN静态文件（例如Google Code、jQuery最新版本、AJAX CDN等）对性能更好，因为它请求来自整个网页不同的另一个域。

另一种提高性能的方法是将Expires头设置为几个月后，强制浏览器缓存静态文件并减少请求。

我想知道哪种方法是最好的，考虑性能以及是否可以同时使用两种方法。

- Gustavo Gondim

---

CDN（内容分发网络）总是设置远期过期时间。 - SLaks

阅读此内容 - https://dev59.com/5Gsz5IYBdhLWcg3wy7HU#7760353 - Andy Davies

@AndyDavies 相似但不同的问题。也帮助了我。谢谢！ - Gustavo Gondim

Answer 1

最好同时采用这两种技术来进行网站性能优化（WPO），也称为前端优化（FEO）。它们可以惊人地搭配使用。虽然如果必须在两者之间选择一个，我肯定会选择缓存。事实上，我会说为所有Web项目设置适当的资源缓存是必不可少的，即使您要使用CDN。

设置“Expires”头和缓存资源是必须的，应该在所有资源上100%地完成。没有不进行缓存的借口。在Apache上，启用“mod_expires.c”和“mod_headers.c”后，配置非常容易。HTML5 Boilerplate项目在.htaccess文件中有很好的实现示例，如果您的服务器是nginx、lighttpd或IIS等其他类型，请查看这些其他服务器配置。如果有人对学习缓存感兴趣，这里有一篇很好的文章：Mark Nottingham's Caching Tutorial。

内容分发网络

您提到了Google Code、jQuery latest、AJAX CDN，我想简单谈谈CDN的一般情况，包括您付费使用的和托管您自己资源的CDN，但如果您只是使用托管文件的jquery cdn或从http://cdnjs.com/加载某些内容，同样适用。

我认为CDN不如设置服务器端头缓存重要，但CDN可以提供显著的性能提升，但是您的内容交付网络性能取决于服务提供商。

特别是对于全球受众并且CDN提供商拥有许多全球边缘/对等位置的情况尤其如此。它还将显着降低您的Web托管带宽和CPU使用率（略微），因为您正在将部分工作转移到CDN来交付资源。

CDN在某些情况下可能会对性能产生负面影响，如果CDN的延迟比您的服务器还要慢，则会出现这种情况。此外，如果您过度优化并使用太多并行化资源（例如使用多个子域名，如cdn1、cdn2、cdn3等），可能会导致用户体验变慢，并造成额外的DNS查找开销。需要在此处保持良好的平衡。

另一个可能发生的负面影响是CDN宕机。这已经发生过，也将再次发生。这对于免费CDN来说更为真实。如果CDN因任何原因而宕机，则您的网站也会宕机。这是另一个潜在的单点故障（SPOF）。对于JavaScript资源，您可以聪明地从CDN加载资源，并在失败时检测并加载本地副本。以下是从ajax.googleapis.com加载jQuery并具有备用方案的示例（取自HTML5 Boilerplate）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>

除了一些明显的免费 API 资源（如 jquery、google api 等），如果您正在使用 CDN，则可能需要支付使用费，因此这将增加托管成本。当然，对于某些 CDN，您甚至需要额外支付费用才能访问某些位置，例如亚洲节点可能会额外收费，而北美则不用。

- Anthony Hatzopoulos

---

这不仅是一个答案，它是一节真正的课程！非常感谢。 - Gustavo Gondim

你有没有测试过boilerplate使用的fallback的性能？我一直想测试，但我猜测等待原始内容加载超时太糟糕了，在我们执行document.write之前，网站看起来就像是坏掉了。 - Andy Davies

@AndyDavies 我已经测试过了，你可以看到Steve的测试。最终可能的结果很简单：(1)资源返回404，甚至用户都不会注意到。(2)资源超时+失败，将会导致等待时间等于浏览器（和用户）等待的时间。在这两种情况下，如果用户决定停留在页面而不刷新，没有备选方案，你可以确定网站已经出现故障。如果需要稍等一段时间也没关系。jQuery无论如何都应该放在底部，这样页面和CSS就会稍微渲染一些，而不是空白。 - Anthony Hatzopoulos

如果你想要亲自测试 SPOF，可以尝试这个链接：http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html - Anthony Hatzopoulos

SPOF 更新：您可以在 http://www.webpagetest.org/ > 高级设置 > SPOF 选项卡中测试 SPOF。 - Anthony Hatzopoulos

Answer 2

对于公共应用程序，选择CDN。

缓存有助于重复请求，但不适用于第一次请求。

为确保在首次访问页面时快速加载，请使用CDN，很有可能该文件已由另一个站点缓存。

正如其他人已经提到的那样，CDN的结果当然也是被大量缓存的。

然而，如果您有一个内部网站，可能希望自己托管文件，因为它们通常从内部源加载比从CDN加载更快。

这样，您还可以将多个文件合并为一个文件以减少请求数。

- Albin Sunnanbo

---

非常感谢您的回答！虽然它不是最佳答案，但是它和其他答案一起帮助了我很多！ - Gustavo Gondim

Answer 3

CDN具有提供多个服务器并自动将流量路由到最接近客户端的位置的优点。这可以导致更快的交付，通过位置进行优化。

此外，静态内容不需要特殊的应用服务器（如动态内容），因此您可以将其卸载到CDN中，从而完全减少该流量。流媒体视频剪辑可能太大而无法缓存或不应缓存。但是您不一定想支持该带宽。 CDN将为您处理该流量。

问题并不总是缓存。小型应用程序Web服务器可能只想提供动态内容，但需要解决很少更改的重要媒体的问题。 CDN将为您处理扩展问题。

- jdi

Answer 4

同意@Anthony_Hatzopoulos (+1)

CDN是缓存的补充，有时它也可以帮助优化缓存指令。

例如，我所在公司已经将行为学习算法集成到其CDN中，以识别并动态缓存生成的对象。

通常，这些对象是不可缓存的（即[Cache-Control：max-age = 0] Http头）。但在这种情况下，系统能够识别缓存可能性并覆盖原始HTTP标头方向。（例如：应该被缓存的动态生成的热门产品，或者是热门搜索结果页面，虽然是动态生成的，但仍以相同的形式呈现给数千个用户）。

是的，在你问之前，系统也可以识别个性化数据和非常新鲜的内容，以防止误报... :)

实施这样的算法只有通过反向代理CDN技术才有可能。这是CDN和缓存如何相互补充，创建更好、更智能的加速解决方案的一个例子。

- Igal Zeifman

Answer 5

在这些专家的引用之上，解释非常完美地理解CDN技术和缓存。我只想提供我的个人经验，我曾经在Joomla Virtuemart网站上工作，不幸的是，它不允许更新新的Joomla和Virtuemart版本，因为产品页面中有太多自定义字段，所以一旦访问者达到每天900次，很多用户无法将他们的物品放入购物篮中，因为每次调用大量js和ajax来订购商品需要太长时间。

优化网站后，我们决定使用CDN，然后性能真的变得很好，同时从gtmetrix记录中可以看出，第一个YSlow分数为50％，然后在优化+ CDN之后，它达到了74％。

https://gtmetrix.com/reports/www.florihana.com/jWlY35im

从CDN的仪表板上，您可以看到哪个数据中心成本最高，哪些数据收费最高，以便提高您的营销效果：

是的，配置CDN时必须注意清除时间和平衡资源CDN的数量，因为如果出现问题，您需要找出哪个资源CDN导致了问题。

希望这可以帮助到您。

- tess hsu