脚本/样式表：在本地合并还是使用 CDN？答案

【问题标题】：Scripts/Stylesheets: Consolidate locally or use CDN?脚本/样式表：在本地合并还是使用 CDN？
【发布时间】：2010-12-25 19:18:33
【问题描述】：

我显然可以自己做一些有限的测试，但我希望听到一些在至少中等规模的网站上有实际经验的人的意见。

每个优化网站/带宽的“前 10 名”列表中的两项是：

将尽可能多的 JS 和 CSS 合并到一个文件中（以减少往返）；和
使用内容交付网络（节省带宽/加快下载速度）。

如今，您可以在 Google 或 Microsoft 的 CDN（或两者）上找到几乎所有重要的脚本。你甚至可以找到一些非常重量级的项目，比如 jQuery ThemeRoller 包。与 Amazon S3 等私有 CDN 帐户相比，使用这些 CDN 的主要优势之一是许多访问者已经从其他网站缓存了这些脚本。即使他们不这样做，也很难击败像 Google 这样的网站。

假设我想使用这些公共 CDN，而不是为个人 CDN 帐户支付额外费用，以获得更好或更差或相同的性能。假设我正在使用这些公共 CDN 上的一堆 JS/CSS 文件：jQuery、jquery-ui、一个主题、jQuery TOOLS，也许还有其他一些。除了这些之外，我可能还使用了一些公共 CDN 上不可用的脚本，例如 superfish、jquery.approach 和 hoverIntent。真的很普通的东西。看来我有两个相互排斥的选择：

请参阅公共 CDN 以获取上面列出的脚本。优点是我可以使用其他人的带宽并利用其中一些脚本的流行。缺点是客户端必须对所有这些文件进行不少于 7 次往返（4 个单独的 JS，1 个 CSS，以及 1 个 CSS 和 JS 用于合并/缩小的本地文件）。或者...
将所有内容塞进两个单一的缩小文件（一个用于 JS，一个用于 CSS），并通过我自己的 Web 服务器提供所有内容。优点是只有两次往返（至少节省了 66%）。当然，缺点是现在我必须自己提供更多更多的服务。

这似乎是一个艰难的选择，我认为真正理解哪个会更好（“更好”是客户端加载时间和整体用户体验的函数）的唯一方法是将它实际放在野外并看看会发生什么。

之前有没有人必须做出这个选择，如果是，你选择了什么，为什么，结果如何？或者，如果有人尝试在隔离环境中完成测试任务，您是如何完成的，结果如何？

附注所有这些都描述了“Web 应用程序”类型的网站 - 换句话说，不是很重媒体，但可能包含大量样式和脚本，这些样式和脚本实际上占页面大小的很大一部分。因此，我确实认为这不仅仅是一种智力练习。

【问题讨论】：

标签： optimization web-applications cdn

【解决方案1】：

Microsoft 在其 CDN here 上托管了一堆 jQuery 和相关文件。

【讨论】：

【解决方案2】：

在 Firebug 中查看 Focus.com

我们采用了混合方法。我们将 jQuery 从 Google 中撤下，其余的 css 和 js 被组合/缩小并从 S3 提供。我们通过构建过程自动化了组合/缩小步骤，每个版本都部署在自己的（编号的）目录下，以允许浏览器主动缓存我们的资源。

考虑到我们网站的代码更新频率（大约每两周一次），我们选择从 Google 中移除 jQuery 以保存 40K 的点击量。话虽如此，在我们发布之前，我们对不同的配置进行了一系列测试，并没有发现性能上有显着差异。

【讨论】：

听起来您已经考虑了很多；如果你不介意告诉我一些关于你如何测试的细节，那么我很乐意接受这个答案。
真的很简单。我让开发和测试人员使用 Firebug 从各种网络（即不同的家庭 ISP，以及该国不同地区的一个）从站点加载各种页面并记录结果。我们将更改站点配置，他们将再次运行测试。这是一个晚上的工作，但证明很有用
嗯，希望在负载测试方面有更多的东西。但是，您现在有一些实际在生产中的东西，这使您成为这里的最佳答案！

【解决方案3】：

我认为这一切都取决于您所期望的流量。如果您每月获得大量唯一身份，那么至少使用 Google 或 Microsoft 来提供 JS/CSS 并让他们承担带宽成本是有经济动机的。

【讨论】：