脚本/样式表：在本地合并或使用CDN？

Question

我显然可以对自己进行一些有限的测试，但我希望能听到一些在中等规模网站上拥有实际经验的人。

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

• 将尽可能多的JS和CSS整合到一个文件中（以减少往返次数）;和
• 使用内容分发网络（以节省带宽/加快下载速度）。

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

因此，假设我想使用这些公共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％）。当然，缺点是我现在必须自己提供多更大的金额。

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

所以之前有人必须做出这个选择，如果有的话，你选择了什么，为什么，以及结果如何？或者，如果有人试图在孤立的环境中解决测试任务，你是怎么做的，结果是什么？

P.S。这都描述了一个“Web应用程序”类型的网站 - 换句话说，不是非常媒体密集，但可能包含大量的样式和脚本，实际上占了页面大小的重要部分。因此，我认为这不仅仅是一项智力活动。

Answer 1

在Firebug中查看Focus.com

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

考虑到我们网站的代码更新频率（大约每两周一次），我们选择将jQuery从Google中拉出来以节省40K的命中率。话说回来，在我们推出之前，我们对不同的配置进行了大量测试，并没有发现性能上的显着差异。

Answer 2

我认为这一切都归结为您期望的那种流量。如果你每月获得大量的独立产品，那么就有财务激励至少使用谷歌或微软来服务JS / CSS并让他们承担带宽成本。

Answer 3

Microsoft在其CDN here上托管了大量jQuery及相关文件。