脚本/样式表:在本地合并还是使用CDN?

9
我可以做一些有限的测试,但我希望能听到一些在至少中等规模的网站上有真实世界经验的人的意见。优化网站/带宽的每个“前10名”列表上都有两个项目:
- 将尽可能多的JS和CSS合并到一个文件中(以减少往返次数); - 使用内容分发网络(以节省带宽/加快下载速度)。
如今,你几乎可以在Google或Microsoft的CDN(或两者兼有)上找到每个重要的脚本。你甚至可以找到一些相当沉重的项目,比如jQuery ThemeRoller包。使用这些CDN而不是像Amazon S3这样的私有CDN账户的主要优点之一是许多访问者已经从其他网站缓存了这些脚本。即使他们没有,也很难击败像Google这样的网站的性能。
所以,假设我想使用这些公共CDN而不是为了可能更好、更差或相同的性能而额外支付个人CDN账户费用。同时,我正在使用一堆JS/CSS文件,它们都在这些公共CDN上: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应用程序”类型的网站——换句话说,不是非常媒体密集型,但可能包含大量实际上占据页面大小相当大一部分的样式和脚本。因此,我认为这不仅仅是一种知识性的练习。
3个回答

4

在Firebug中查看Focus.com

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

我们选择从Google获取jQuery以节省40K的开销,考虑到我们网站的代码更新频率(大约每两周一次)。尽管如此,在我们推出之前,我们进行了大量测试不同的配置,并没有检测到性能上的显著差异。


听起来你已经认真考虑过这个问题了;如果您不介意告诉我一些关于您如何进行测试的具体细节,我很乐意接受这个答案。 - Aaronaught
其实很简单。我让开发和测试人员使用Firebug从不同的网络(即不同家庭ISP和该国另一个地区的网络)加载站点的各个页面,并记录结果。我们会更改站点配置,然后再运行测试。这是一个晚上的工作,但证明非常有用。 - DrewM
哦,我本来希望得到更多关于负载测试的内容。但是,你提供的东西实际上已经在生产中了,这使得你的答案成为了最好的答案! - Aaronaught

0

我认为这归根结底取决于您预计的流量类型。如果您每月有大量独特流量,则有理由至少使用Google或Microsoft来提供JS / CSS并让它们承担带宽费用。


0

微软将一堆jQuery和相关文件托管在他们的CDN这里


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接