Performance 使用缓存还是CDN更好？

我正在研究加载静态文件时浏览器的性能，这个疑问已经出现了

有人说使用CDN静态文件（即Google代码、jQuery 最新的AJAX CDN，…）性能更好，因为它要求 来自其他域而不是整个网页

提高性能的其他方法是设置

Expires

头 等于几个月后，强制浏览器缓存静态 归档并减少请求

我想知道哪种方式是最好的，考虑性能和 如果我可以把两者结合起来的话

---

提前感谢各位，我喜欢StackOverflow。

CDN的好处是提供多台服务器，并自动将流量路由到离客户端最近的位置。这可以加快交付速度，并根据位置进行优化

此外，静态内容不需要特殊的应用程序服务器（如动态内容），因此，您能够将其卸载到CDN意味着您可以完全减少流量。流式视频剪辑可能太大，无法缓存或不应缓存。但你不一定要支持这种带宽。CDN将为您承担该流量

---

它并不总是关于缓存。一个小型应用程序web服务器可能只想提供动态内容，但需要一个解决方案，用于很少改变的重量级媒体。CDN为您处理扩展问题

对于公共应用程序，请选择CDN。 缓存有助于重复请求，但不适用于第一个请求。 为了确保在第一页访问时快速加载，请使用CDN，该文件很可能已经被另一个站点缓存。 正如其他人已经提到的，CDN结果当然也被大量缓存

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

---

然后，您还可以选择将多个文件合并为一个文件，以减少请求数量。

如果您正在对站点进行web性能优化（WPO），也就是前端优化（FEO），则最好同时使用这两种技术。他们可以手牵手工作，令人惊讶。虽然如果我必须选择一个而不是另一个，我肯定会选择缓存。事实上，我要说的是，即使要使用CDN，也必须为所有web项目设置适当的资源缓存

缓存 设置

Expires

头和资源缓存是必须的，并且应该在100%的时间内为您的资源进行设置。没有理由不做缓存。在Apache上，启用

mod_expires.c

和

mod_headers.c

后，这非常容易配置。中有很好的实现示例，如果您的服务器是nginx、lighttpd或IIS等其他服务器，请查看这些示例

如果有人对学习缓存感兴趣，请阅读以下内容：

内容交付网络 您提到了

googlecode、jQuery-latest、AJAX-CDN

，我只想简单介绍一下CDN，包括那些您付费并托管自己资源的CDN，但如果您只是使用jQuery托管的文件CDN或从CDN加载一些内容，则同样适用

我认为CDN不如设置服务器端头缓存重要，但CDN可以提供显著的性能提升，但您的内容交付网络性能会有所不同

如果您的流量是全球受众，并且CDN提供商拥有许多全球边缘/对等位置，则尤其如此。它还将显著降低您的网络主机带宽和cpu使用率（一点），因为您将部分工作转移到CDN以交付资源

在某些罕见的情况下，如果CDN的延迟最终比您的服务器慢，CDN可能会对性能造成负面影响。此外，如果过度优化并使用过多资源（使用多个子域，如cdn1、cdn2、cdn3等），最终可能会降低用户体验，并导致额外DNS查找的开销。这里需要一个良好的平衡

另一个可能发生的负面影响是CDN下降。它已经发生了，而且还会再次发生。免费CDN更是如此。如果CDN因任何原因宕机，那么您的站点也会宕机。这是另一种潜力。对于javascript资源，您可以聪明地从CDN加载资源，如果资源失败，不管是什么情况，都可以检测并加载本地副本。下面是一个从ajax.googleapis.com加载jQuery的示例，其中包含一个回退（取自HTML5样板文件）：

window.jQuery | | document.write（“”）

---

除了显而易见的免费API资源（jquery、GoogleAPI等），如果您使用CDN，您可能需要支付使用费，因此这将增加托管成本。当然，对于某些CDN，您甚至必须支付额外费用才能访问某些位置，例如，亚洲节点可能比北美节点的成本更高

同意@Anthony_Hatzopoulos（+1）

CDN补充了缓存；此外，在某些情况下，它将有助于优化缓存指令

例如，我工作的一家公司将行为学习算法集成到其CDN中，以识别和动态缓存生成的对象

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

是的，在您询问之前，系统还可以识别个性化数据和非常新鲜的数据，以防止误报…：）

实现这样一个alg

<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>