optimization - 脚本/样式表 : Consolidate locally or use CDN?

Question

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

每个用于优化站点/带宽的“前 10 名”列表中的两项是:

将尽可能多的 JS 和 CSS 合并到一个文件中(以减少往返)；和

使用内容交付网络(以节省带宽/加快下载速度)。

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

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

有关上面列出的脚本，请参阅公共(public) CDN。优点是我可以使用其他人的带宽并利用其中一些脚本的流行。缺点是客户端必须对所有这些文件进行不少于 7 次往返(4 个单独的 JS，1 个 CSS，以及每个 CSS 和 JS 1 个用于合并/缩小的本地文件)。或者...

将所有内容塞进两个单一的缩小文件(一个用于 JS，一个用于 CSS)，并从我自己的 Web 服务器上提供所有内容。优点是只有两次往返(至少节省了 66%)。当然，缺点是现在我必须自己提供更多的服务。

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

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

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

Answer 1

查看 Focus.com在 Firebug

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

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