脚本/样式表:在本地合并或使用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%).缺点当然是,现在我现在要服务于多更大的量自己.

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

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

PS这就是描述"网络应用程序"类型的网站 - 换句话说,不是非常媒体密集,但可能包含大量的样式和脚本,实际上占了页面大小的一大部分.因此,我认为这不仅仅是一项智力活动.

Answer 1

在 Firebug 中查看Focus.com

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

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